<template>
  <div class="creativeEdit">
    <div class="sidebar">
      <breadcrumb />
      <div class="courseHead">
        <div class="btnBox">
          <!-- <el-popconfirm
            title="是否先保存课程数据"
            @confirm="handelConfirmSave"
            @cancel="handelCancelSave"
          >
            <button slot="reference" @change="handelNew">新建</button>
          </el-popconfirm> -->
          <button @click="handelUpdateCourseInfo" v-if="(isMyCaeate || isOtherDesiger) && canEdit">
            保存
          </button>
          <el-popover placement="bottom" width="200" trigger="click" popper-class="saveAsPopper"
            v-if="(isMyCaeate || isOtherDesiger) && canEdit">
            <div class="buttonLists">
              <button @click="pushCourseInfo(true)">课程</button>
              <button @click="handelHelp">模板</button>
            </div>
            <el-button slot="reference" style="padding: 0 6px">另存为</el-button>
          </el-popover>
          <button v-if="courseDetailData.state == '已提交' && (isMyCaeate || isOtherDesiger)" @click="backEditSState">
            撤消提交
          </button>
          <button @click="handelOpenCourse" v-if="courseDetailData.state == '已提交' && (isMyCaeate || isOtherDesiger)">
            发布课程
          </button>
          <button v-if="courseDetailData.state == '已删除' && (isMyCaeate || isOtherDesiger)" @click="backEditSState">
            撤消删除
          </button>
          <button @click="handelpreview">预览</button>
          <button @click="handelShowConfirmDialog" v-if="(isMyCaeate || isOtherDesiger) && canEdit && !courseDetailData.isContinuousPublish
            ">
            提交
          </button>
          <!-- <button
            @click="handleShowCPubDialog"
            v-if="courseDetailData.isContinuousPublish && isMyCaeate && canEdit"
          >
            持续发布
          </button> -->
          <el-popover placement="bottom" width="200" trigger="click" popper-class="moreBtnPopper"
            v-if="(isMyCaeate || isOtherDesiger) && canEdit">
            <div class="buttonLists">
              <!-- <button @click="handelCancelSave" v-if="isSave">清空</button> -->
              <el-popconfirm title="确认将课程所有信息清空?" @confirm="handelCancelSave">
                <button slot="reference">清空</button>
              </el-popconfirm>
              <!-- <el-popconfirm
                title="确认删除课程，删除后可恢复课程?"
                @confirm="handelDelete"
                :disabled="!$route.query.courseID"
                v-if="isMyCaeate"
              >
                <button
                  slot="reference"
                  :class="{ disabledBtn: !$route.query.courseID }"
                >
                  删除
                </button>
              </el-popconfirm>
              <upload :showFileList="false" :isImportCourse="true" :baseFileUrl="''" :accept="'.json'" @fileDataUploaded="handleImport">
                <template #default>
                  <el-button type="text" size="mini">导入</el-button>
                </template>
              </upload> -->
              <button @click="handleExport">导出JSON</button>
              <button @click="handleExportDocx">导出Word</button>
              <!-- <button @click="handelHelp" style="cursor: not-allowed;" :disabled="true">快速入门</button> -->
              <!-- <button @click="handelHelp" style="cursor: not-allowed;" :disabled="true">帮助</button> -->
              <el-popconfirm :title="!isSave
                  ? '课程信息尚未保存，是否要退出课程编辑页面！'
                  : '退出课程编辑页面'
                " @confirm="closeEditPage">
                <button slot="reference">关闭</button>
              </el-popconfirm>
            </div>
            <el-button slot="reference" style="padding: 0 6px">更多</el-button>
          </el-popover>
          <!-- <button @click="handelDelete" v-if="this.$route.query.courseID">
            关闭
          </button> -->
        </div>
        <div class="preview" @click="handelChangePage('course')" title="编辑课程信息">
          <div class="coursePic" :class="{ havePic: courseDetailData.iconPath }">
            <img :src="courseDetailData.iconPath" v-if="courseDetailData.iconPath" />
            <div class="noneImg" v-else>
              <!-- <img :src="require('@/assets/images/addImg.png')" /> -->
              <div class="tips">暂无封面图片</div>
            </div>
          </div>
          <div class="courseName" :class="{ nEmpty: courseDetailData.name }">
            {{ courseDetailData.name || "请输入课程名称" }}
          </div>
        </div>
      </div>
      <div class="courseGroup">
        <el-collapse v-model="activeNames">
          <el-collapse-item :name="gindex" v-for="(gitem, gindex) in courseDetailData.content" :key="gindex"
            ref="creative-courseGroup" :class="{
              groupAcitve: currGroupIndex == gindex,
              'item-active': currGroupIndex == gindex && currTaskIndex == null,
            }"
          >
            <template
              slot="title"
              :class="'collapseheadBox'"
              style="z-index: 999; position: sticky; top: 15px"
            >
              <div
                class="headBox"
                @click.stop="handelChangePage('taskGroup', gitem, gindex)"
                title="编辑任务组信息"
              >
                <div class="lineBox">
                  <span class="weightInCourseLine" :style="{width: `${gitem.weightInCourse}%`}" />
                  <span class="weightInCourseValue">权重{{gitem.weightInCourse}}%</span>
                  <span class="weightInCourseLineDefault" />
                </div>
                <div class="taskGroupIcon">
                  <img :src="gitem.iconPath" v-if="gitem.iconPath" />
                </div>
                <div class="taskGroupName">
                  {{ gitem.name || "未命名任务组" + (gindex + 1) }}
                </div>
                <div class="icondown2Box" @click="handelOpenCollapse(gindex)">
                  <img :src="require('@/assets/images/down.png')" class="downIcon" />
                </div>
                <div class="addIcon">
                  <addGroup @handelPushGroup="handelPushGroup" @handelPushTask="handelPushTask" :gindex="gindex"
                    :tindex="gitem.tasks.length - 1" :distinguish="1" :key="'down'"
                    v-if="(isMyCaeate || isOtherDesiger) && canEdit" />
                </div>
                <div class="deleteIconGroup" @click.stop="
                  handleShowDeleteDialog(gindex, null, gitem.publishedCount, gitem, 'group')
                  " v-if="courseDetailData.content.length !== 1 &&
    (isMyCaeate || isOtherDesiger) &&
    canEdit
    ">
                  <img :src="require('@/assets/images/delete.png')" />
                </div>
              </div>
            </template>
            <draggable v-model="gitem.tasks" chosen-class="chosen" force-fallback="true" group="sideNav" animation="100"
              delay="100" @start="onStart" @end="onEnd" @update="update(gindex)" @add="add" :key="gindex"
              :disabled="(!isMyCaeate && !isOtherDesiger) || !canEdit">
              <transition-group>
                <div class="taskContentBox" v-for="(titem, tindex) in gitem.tasks"
                  :key="gindex + '-' + tindex + titem.id">
                  <div class="taskContent draggableItem" :class="{
                    acitveTask:
                      currGroupIndex === gindex && currTaskIndex === tindex,
                  }" @click="handelChangePage('task', titem, tindex, gindex)" title="拖拽">
                    <div class="numBox">
                      {{ tindex + 1 }}
                    </div>
                    <div class="weightInGroup">
                      权重:{{ titem.weightInGroup }}%
                    </div>
                    <!-- 任务锁 -->
                    <!-- <div
                      class="taskLock"
                      v-if="
                        courseDetailData.isContinuousPublish &&
                        titem.isLockedForPublish === true
                      "
                    >
                      <i class="iconfont iconlock"></i>
                    </div>
                    <div
                      class="taskLock"
                      v-if="
                        courseDetailData.isContinuousPublish &&
                        titem.isLockedForPublish === false
                      "
                    >
                      <i class="iconfont iconLOCKOPEN"></i>
                    </div> -->
                    <div class="publishedIcon" :class="{ 'updateUnPublish': titem.state === '已修改未发布' }">
                      <span>{{ titem.state }}
                        <i class="iconfont iconduihao" title="已发布"
                          v-if="(titem.state === '已发布') && courseDetailData.isContinuousPublish"></i>
                      </span>
                    </div>
                    <div class="taskPic" :class="{ havePic: titem.iconPath }">
                      <img :src="titem.iconPath" v-if="titem.iconPath" />
                      <div class="noneImg" v-else>
                        <img :src="require('@/assets/images/addImg.png')" />
                        <div class="tips">插入图标</div>
                      </div>
                    </div>
                    <div class="taskName" :class="{ nEmpty: titem.name }">
                      {{ titem.name || "请输入任务名" }}
                      <!-- + gindex + "-" + tindex  -->
                    </div>
                    <div class="addIcon">
                      <addGroup @handelPushGroup="handelPushGroup" @handelPushTask="handelPushTask" :gindex="gindex"
                        :tindex="Number(tindex)" :distinguish="0" :key="'up'"
                        v-if="(isMyCaeate || isOtherDesiger) && canEdit" />
                    </div>
                    <div class="addIcon pushdown">
                      <addGroup @handelPushGroup="handelPushGroup" @handelPushTask="handelPushTask" :gindex="gindex"
                        :tindex="Number(tindex)" :distinguish="1" :key="'down'"
                        v-if="(isMyCaeate || isOtherDesiger) && canEdit" />
                    </div>
                    <div class="copy" @click="copyTask(titem)" v-if="(isMyCaeate || isOtherDesiger) && canEdit">
                      <i class="iconfont iconcopy"></i>
                    </div>
                    <div class="deleteIcon" @click.stop="
                      handleShowDeleteDialog(
                        gindex,
                        tindex,
                        titem.publishedCount,
                        titem,
                        'task'
                      )
                      " v-if="gitem.tasks.length !== 1 && (isMyCaeate || isOtherDesiger) && canEdit"
                      :disabled="titem.state === '已发布'">
                      <img :src="require('@/assets/images/delete.png')" />
                    </div>
                  </div>
                </div>
              </transition-group>
            </draggable>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="edit-main">
      <course v-if="currShow == 'course'" @handelChange="handelChange" :currData="courseDetailData"
        :isMyCaeate="isMyCaeate" :isOtherDesiger="isOtherDesiger" :canEdit="canEdit"
        :isContinuousPublish="courseIsContinuousPublish" :parentIconList="courseIconList"
        @handlePublishedCourse="handlePublishedCourse" @handleSave="handelUpdateCourseInfo" />
      <taskGroup v-if="currShow == 'taskGroup'" :currGroupIndex="currGroupIndex" :currData="currData"
        @handelChange="handelChange" @handelPushTask="handelPushTask" :key="currGroupIndex" :isMyCaeate="isMyCaeate"
        :isOtherDesiger="isOtherDesiger" :canEdit="canEdit" :parentIconList="taskGroupIconList"
        :isContinuousPublish="courseIsContinuousPublish" @handlePublishedTaskGroup="handlePublishedTaskGroup"
        @handleSave="handelUpdateCourseInfo" />
      <task v-if="currShow == 'task'" :currGroupIndex="currGroupIndex" :currTaskIndex="currTaskIndex" :currData="currData"
        :courseDetailData="courseDetailData" @handelChange="handelChange" :isMyCaeate="isMyCaeate"
        :isOtherDesiger="isOtherDesiger" :canEdit="canEdit" :parentIconList="taskIconList"
        :isContinuousPublish="courseIsContinuousPublish" ref="taskComponent" @handlePublishedTask="handlePublishedTask"
        @handleSave="handelUpdateCourseInfo" />
    </div>
    <el-dialog top="4vh" :visible.sync="previewDialog" width="50vw" custom-class="previewCourse">
      <div class="courseInfo" v-if="previewDialog">
        <div class="courseIconPath">
          <img :src="courseDetailData.iconPath" />
        </div>
        <div class="courseDescBox">
          <div class="courseName">课程名：{{ courseDetailData.name }}</div>
          <div class="designUser">主设计师：{{ mainUserName }}</div>
          <div class="groupCount">任务组总数：{{ groupCount }}</div>
          <div class="taskCount">任务总数：{{ taskCount }}</div>
        </div>
      </div>
      <tasks v-if="previewDialog" :courseInfo="getCourseDetailInfoObj" :courseData="{}" :unShowGroupIcon="false"
        :learnGroupIndex="'0-0'" :creativeCourse="true" />
    </el-dialog>
    <el-dialog title="提示" top="4vh" :visible.sync="showConfirmCourseInfo" width="50vw" custom-class="confirmCourseInfo">
      <div class="courseInfo" v-if="showConfirmCourseInfo">
        <div class="courseIconPath">
          <img :src="courseDetailData.iconPath" />
          <div class="mustInput" v-if="!courseDetailData.iconPath" title="课程封面不能为空">
            *
            <!-- <img
              :src="require('@/assets/images/mutIcon.png')"
              @click.stop.prevent
              id="mustIcon-coursePic"
            /> -->
          </div>
        </div>
        <div class="courseDescBox">
          <div class="courseName">
            课程名：{{ courseDetailData.name }}
            <div class="mustInput" v-if="!courseDetailData.name" title="课程名不能为空">
              *
              <!-- <img
                :src="require('@/assets/images/mutIcon.png')"
                @click.stop.prevent
                id="mustIcon-courseName"
              /> -->
            </div>
          </div>
          <div class="designUser">
            主设计师：{{
              userInfo.nickName || userInfo.realName || userInfo.email
            }}
          </div>
          <div class="groupCount">任务组总数：{{ groupCount }}</div>
          <div class="taskCount">任务总数：{{ taskCount }}</div>
          <div class="confirmBtnBox">
            <el-popconfirm confirm-button-text="确认" cancel-button-text="取消" icon="el-icon-info" icon-color="#f90"
              title="课程信息提交后无法修改，请确认信息无误！" @confirm="handelConfirmCourseInfo">
              <button slot="reference" class="confirmBtn" :class="{
                disabledBtn: mustInputInfo.length || !$route.query.courseID,
              }" :disabled="mustInputInfo.length !== 0 || !$route.query.courseID">
                提交
              </button>
              <!-- <el-button slot="reference">删除</el-button> -->
            </el-popconfirm>

            <div class="iconBox mustIcon" title="必填内容">
              *
              <!-- <img
                :src="require('@/assets/images/mutIcon.png')"
              /> -->
            </div>
            <div class="tips">{{ mustInputInfo.length }}个未填</div>
            <!-- <div
              class="iconBox chioceIcon"
              style="margin-left: 30px"
              title="选填内容"
            >
              *
            </div>
            <div class="tips">{{ unMustInputInfo.length }}个未填</div> -->
          </div>
        </div>
      </div>
      <tasks v-if="showConfirmCourseInfo" :courseInfo="getCourseDetailInfoObj" :courseData="{}" :unShowGroupIcon="true"
        :learnGroupIndex="'0-0'" :submissionCourseInfoStatus="true" :creativeCourse="true" />
    </el-dialog>
    <el-dialog title="提示" :visible.sync="showDeleteTips" width="30%" custom-class="deleteGroupTaskDialog">
      <span>{{
        currDeleteObj === "group" ? "是否删除任务组" : "是否删除任务"
      }}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDeleteTips = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirmDelete">确 定</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog
      :title="stepNum === 1 ? '解锁需要发布的任务' : '确认发布的任务'"
      top="4vh"
      :visible.sync="previewCourseDetail"
      width="50vw"
      custom-class="previewCourseDetail"
      @close="handleClosePreviewCourseDetailDialog"
    >
      <div class="continuousReleaseBox" v-if="previewCourseDetail">
        <div class="courseInfo" v-if="previewCourseDetail">
          <div class="courseIconPath">
            <img :src="courseDetailData.iconPath" />
          </div>
          <div class="courseDescBox">
            <div class="courseName">课程名：{{ courseDetailData.name }}</div>
            <div class="designUser">主设计师：</div>
            <div class="groupCount">任务组总数：{{ groupCount }}</div>
            <div class="taskCount">任务总数：{{ taskCount }}</div>
            <div class="btnBox">
              <button
                class="nextBtn"
                @click="handleContinuPubBtnNext"
                v-if="stepNum === 1"
              >
                下一步
              </button>
              <button
                class="nextBtn"
                @click="handleContinuPubBtnPrev"
                v-if="stepNum === 2"
              >
                上一步
              </button>
              <button class="submitBtn" v-if="stepNum === 2">提交</button>
            </div>
          </div>
        </div>
        <div class="stepBox">
          <div class="stepNum-1" v-if="stepNum === 1">
            <courseDetail
              :courseInfo="courseDetailData"
              :courseData="{}"
              :unShowGroupIcon="true"
              :learnGroupIndex="'0-0'"
              :submissionCourseInfoStatus="true"
              v-if="stepNum === 1"
              :key="1"
            />
          </div>
          <div class="stepNum-2" v-if="stepNum === 2">
            <courseDetail
              :courseInfo="filterTask"
              :courseData="{}"
              :unShowGroupIcon="true"
              :learnGroupIndex="'0-0'"
              :submissionCourseInfoStatus="true"
              :confirmPush="true"
              :key="2"
            />
          </div>
        </div>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
const breadcrumb = () => import("@/components/Breadcrumb/index");
const course = () => import("./course");
const taskGroup = () => import("./taskGroup");
const task = () => import("./task");
const addGroup = () => import("./addGroupPopover");
const draggable = () => import("vuedraggable");
import { mapState } from "vuex";
const tasks = () => import("@/views/courses/detail/task_N/task_N");
// const courseDetail = () => import("./component/courseDetail.vue");
import {
  getDesigncourseData,
  courseCreate,
  updatedesigncourse,
  deleteCourse,
  updateDesignCourseState,
  publishDesigncourse,
  importDesCourse,
  exportDesCourseToJson,
  exportDesCourseToWord,
  deleteTask,
  deleteGroup
} from "@/request/designcourse";
import publicBgPageVue from "../../../components/publicBgPage/publicBgPage.vue";
import { location, copy } from "@/util/tool";
import { formatCourseGroupTaskObj } from "@/util/courseData";
// const upload = () => import("@/components/upload/index.vue")
import { encryptionToString } from "@/util/qetag";
import { Session } from "@/util/storage/session"
export default {
  name: "Creativeourse",
  components: {
    breadcrumb,
    course,
    taskGroup,
    task,
    addGroup,
    draggable,
    tasks,
    // courseDetail,
    // upload
  },
  data() {
    return {
      location: location(window),
      courseDetailData: {},
      saveMainDesignName: "",
      courseIsContinuousPublishState: false,
      defaultCourseData: {
        name: "", // 课程名
        iconPath: "", // 课程封面地址
        mainDesignerUserID: 0, // 主设计师id
        author_name: "",
        designTeamID: 0, // 设计团队id
        isContinuousPublish: false, // 持续发布
        otherDesigerUserIDList: "", // 其它课程设计者
        description: "", // 课程简介
        goal: "", // 教学目标taskPic
        guidePath: "", // 课程标准、课程指南
        memo: "", // 备注
        references: "", // 参考文献
        pubUserID: 0, // 发布用户id
        pubTime: null,
        taskGroupTotal: 0, // 任务组总数
        taskTotal: 0, // 任务总数
        hasSyncToContent: false, // 是否已经同步
        hasOpenToSelect: false, // 是否已开设课程
        courseType: "", // 课程类型 ENUM('常规', '实训', '比赛')
        allowGenCurr: false, // 自主学习课程，发布后自动创建选项课程，无任课老师，开课时间上课时间
        //任务组
        content: [
          {
            authorID: 0,
            allowOtherAuthor: false,
            lastUpdateAuthorID: 0,
            memo: "", // 备注
            courseID: null, // 课程ID
            description: "", // 任务组描述
            groupNoInCourse: 1, // 任务组编号
            iconPath: "", // 图标
            name: "", // 名称
            taskGroupID: null, // 任务组ID
            taskTotal: 0, // 任务总数
            weightInCourse: 10, // 任务组权重
            tasks: [
              {
                authorID: 0,
                allowOtherAuthor: false,
                lastUpdateAuthorID: 0,
                memo: "",
                state: "未发布",
                courseID: null, // 课程ID
                iconPath: "",
                description: "",
                goal: "",
                isLockedForPublish: true, // 任务锁
                isSyncToContent: false, // 是否已同步到发布课程库
                name: "",
                level: 1,
                publishedCount: 0, // 发布次数
                taskGroupID: null, // 任务组ID
                taskID: null, // 任务ID
                weightInGroup: 10, // 任务权重
                taskNoInGroup: 1, // 任务的编号
                guidelineTotal: 0, // 引导文总数
                canVote: false, // 允许投票
                isFinalTask: false, // 期末考核
                guidelines: [
                  {
                    noInTask: 1,
                    operType: "简答",
                    description: "",
                    weightInTask: 10,
                    memo: "",
                    foreignID: 0,
                    foreign_title: "",
                    // questionGroupDetail: {
                    //   gid: null,
                    //   title: "",
                    // },
                  },
                ],
              },
            ],
          },
        ],
        state: "创作中", // 默认状态
      },
      activeNames: ["1"],
      currShow: "course",
      currGroupIndex: null, // 当前任务组的索引值
      currTaskIndex: null, // 当前任务的索引值
      currData: {}, // 当前查看的数据
      visibleTask: false,
      // 默认任务组
      groupDefault: {
        authorID: 0,
        allowOtherAuthor: false,
        lastUpdateAuthorID: 0,
        memo: "", // 备注
        courseID: null, // 课程ID
        description: "", // 任务组描述
        groupNoInCourse: 1, // 任务组编号
        iconPath: "", // 图标
        name: "", // 名称
        taskGroupID: null, // 任务组ID
        taskTotal: 0, // 任务总数
        tasks: [], // 任务列表
        weightInCourse: 10, // 任务组权重
      },
      // 默认任务
      taskDefault: {
        authorID: 0,
        allowOtherAuthor: false,
        lastUpdateAuthorID: 0,
        memo: "",
        state: "未发布",
        courseID: null, // 课程ID
        iconPath: "",
        description: "",
        goal: "",
        isLockedForPublish: true, // 任务锁
        isSyncToContent: false, // 是否已同步到发布课程库
        name: "",
        level: 1,
        publishedCount: 0, // 发布次数
        taskGroupID: null, // 任务组ID
        taskID: null, // 任务ID
        weightInGroup: 10, // 任务权重
        taskNoInGroup: 1, // 任务的编号
        guidelineTotal: 0, // 引导文总数
        canVote: false, // 允许投票
        isFinalTask: false, // 期末考核
        taskCode: '', // 任务编码
        needSelfScore: false, // 自评
        resultAccessType: '可公开', // '可公开', '必须公开', '必须不公开'
        guidelines: [
          {
            description: "",
            noInTask: 1,
            operType: "简答",
            weightInTask: 10,
            memo: "",
            id: 1,
            foreignID: 0,
            foreign_title: "",
            // questionGroupDetail: {
            //   gid: null,
            //   title: "",
            // },
          },
        ],
      },
      guidelinesDefault: {
        description: "",
        noInTask: 1,
        operType: "简答",
        weightInTask: 10,
        // memo: "",
        id: 1,
        foreignID: 0,
        foreign_title: "",
        limit: 0,
        accpet: '',
        // questionGroupDetail: {
        //   gid: null,
        //   title: "",
        // },
      },
      drag: false,
      markCurrMaxTaskId: [], // 记录任务最大的id
      isSave: true, // 记录是否保存课程数据
      previewDialog: false, // 预览课程
      showConfirmCourseInfo: false, // 打开课程
      isLinstened: false, // 监听事件已触发
      // 默认图标
      taskGroupIconList: [
        location(window) + "/icons/taskgroup/icon1.svg",
        location(window) + "/icons/taskgroup/icon2.svg",
        location(window) + "/icons/taskgroup/icon3.svg",
        location(window) + "/icons/taskgroup/icon4.svg",
        location(window) + "/icons/taskgroup/icon5.svg",
        location(window) + "/icons/taskgroup/icon6.svg",
        location(window) + "/icons/taskgroup/icon7.svg",
        location(window) + "/icons/taskgroup/icon8.svg",
        location(window) + "/icons/taskgroup/icon9.svg",
        location(window) + "/icons/taskgroup/icon10.svg",
        location(window) + "/icons/taskgroup/icon11.svg",
        location(window) + "/icons/taskgroup/icon12.svg",
        location(window) + "/icons/taskgroup/icon13.svg",
        location(window) + "/icons/taskgroup/icon14.svg",
        location(window) + "/icons/taskgroup/icon15.svg",
      ],
      taskIconList: [
        location(window) + "/icons/task/icon1.svg",
        location(window) + "/icons/task/icon2.svg",
        location(window) + "/icons/task/icon3.svg",
        location(window) + "/icons/task/icon4.svg",
        location(window) + "/icons/task/icon5.svg",
        location(window) + "/icons/task/icon6.svg",
        location(window) + "/icons/task/icon7.svg",
        location(window) + "/icons/task/icon8.svg",
        location(window) + "/icons/task/icon9.svg",
        location(window) + "/icons/task/icon10.svg",
        location(window) + "/icons/task/icon11.svg",
        location(window) + "/icons/task/icon12.svg",
        location(window) + "/icons/task/icon13.svg",
        location(window) + "/icons/task/icon14.svg",
        location(window) + "/icons/task/icon15.svg",
      ],
      courseIconList: [
        location(window) + "/icons/course/icon1.svg",
        location(window) + "/icons/course/icon2.svg",
        location(window) + "/icons/course/icon3.svg",
        location(window) + "/icons/course/icon4.svg",
        location(window) + "/icons/course/icon5.svg",
        location(window) + "/icons/course/icon6.svg",
        location(window) + "/icons/course/icon7.svg",
        location(window) + "/icons/course/icon8.svg",
        location(window) + "/icons/course/icon9.svg",
        location(window) + "/icons/course/icon10.svg",
        location(window) + "/icons/course/icon11.svg",
        location(window) + "/icons/course/icon12.svg",
        location(window) + "/icons/course/icon13.svg",
        location(window) + "/icons/course/icon14.svg",
        location(window) + "/icons/course/icon15.svg",
      ],
      showDeleteTips: false, // 删除任务组、任务的提示
      markDeleteGIndex: null, // 记录任务组的索引值
      markDeleteTIndex: null, // 记录任务的索引值
      currDeleteObj: "", // 当前删除的任务组、任务 group taks
      previewCourseDetail: false, // 持续发布对话框
      stepNum: 1, // 持续发布 显示的步骤编号
      isClear: false, // 是否清空了数据
      mainUserName: "",
      // courseID:  null,
      updateCourseInfoIng: false, // 正在保存数据
    };
  },
  watch: {
    isSave(n, o) {
      if (n) {
        // 移除监听事件
        this.destroyedBeforeunloadHandler();
      } else {
        // 添加关闭、刷新浏览器的监听事件
        if ((this.isMyCaeate || this.isOtherDesiger) && this.canEdit) this.createBeforeunloadHandler();
      }
    },
    courseDetailData(n, o) {
      const findUser = this.userList.find(item => item.userID === this.courseDetailData.mainDesignerUserID)
      if (findUser) this.mainUserName = findUser.realName || findUser.nickName || findUser.email || findUser.regName;
      // n.content.forEach((item) => {
      //   item.tasks.forEach((titem) => {
      //     if (titem.state === "未发布" || titem.state === "已修改未发布") {
      //       this.$set(item, "state", "未完全同步");
      //     }
      //   });
      // });
    },
    "$route"(n, o) {
      // this.createCourseData()
      // const {name, query} = n
      // if (name == "Creativeourse" && query?.courseID) {
      //   const courseID = query.courseID;
      //   this.fetchDesignCourseData({ id: courseID });
      // }
    },
    userList(n) {
      const findUser = this.userList.find(item => item.userID === this.courseDetailData.mainDesignerUserID)
      if (findUser) this.mainUserName = findUser.realName || findUser.nickName || findUser.email || findUser.regName;
    }
  },
  computed: {
    locationBaseUrl() {
      return location
    },
    ...mapState({
      userInfo: (state) => state.user.userInfo,
      userList: (state) => state.user.userList
    }),
    filterIconPath() {
      let url = this.courseDetailData.iconPath;
      if (url.indexOf("&") !== -1) {
        return url.split(url.substring(url.lastIndexOf("&")))[0];
      } else {
        return url;
      }
    },
    // 统计任务组总数
    groupCount() {
      return this.courseDetailData.content.length;
    },
    // 统计任务总数
    taskCount() {
      let count = 0;
      this.courseDetailData.content.forEach((item) => {
        item.tasks.forEach((titem) => {
          count++;
        });
      });
      return count;
    },
    // 必填
    mustInputInfo() {
      let mustInput = [];
      if (this.showConfirmCourseInfo) {
        if (this.courseDetailData.iconPath == "") {
          mustInput.push({ id: "mustIcon-coursePic" });
        }
        if (this.courseDetailData.name == "") {
          mustInput.push({ id: "mustIcon-courseName" });
        }
        this.courseDetailData.content.forEach((item, index) => {
          if (item.name == "") {
            mustInput.push({ id: `mustIcon-taskGroup-${index}` });
          }
          item.tasks.forEach((titem, tindex) => {
            if (titem.name == "") {
              mustInput.push({ id: `mustIcon-taskGroup-task-${tindex}` });
            }
            titem.guidelines.forEach((gitem, gindex) => {
              if (gitem.description == "") {
                mustInput.push({
                  id: `mustIcon-taskGroup-task-guideline-content${gindex}`,
                });
              }
              if (gitem.operType === "刷题" && !gitem.foreignID) {
                mustInput.push({
                  id: `mustIcon-taskGroup-task-guideline-foreign${gindex}`,
                });
              }
            });
          });
        });
      } else {
        mustInput = ["unSubmit"];
      }
      return mustInput;
    },
    // 非必填
    unMustInputInfo() {
      let unMustInput = [];
      if (this.courseDetailData.description == "") {
        unMustInput.push({ id: "unMustIcon-description" });
      }
      if (this.courseDetailData.goal == "") {
        unMustInput.push({ id: "unMustIcon-goal" });
      }
      this.courseDetailData.content.forEach((item, index) => {
        item.tasks.forEach((titem, tindex) => {
          if (titem.description == "") {
            unMustInput.push({ id: `unMustIcon-taskGroup-taskDesc-${tindex}` });
          }
          if (titem.goal == "") {
            unMustInput.push({ id: `unMustIcon-taskGroup-taskGoal-${tindex}` });
          }
        });
      });
      return unMustInput;
    },
    // 对比userID 判断是否自己创建的课程
    isMyCaeate() {
      return (
        this.courseDetailData.mainDesignerUserID == this.userInfo.userID ||
        this.$route.query.courseID === undefined ||
        this.courseDetailData.mainDesignerUserID === 0 || 
        this.getUserIsAdmin
      );
    },
    // 是否是其它课程设计师
    isOtherDesiger() {
      return this.courseDetailData?.otherDesigerUserIDList?.indexOf(this.userInfo?.userID) !== -1
    },
    // 当前课程状态可否编辑
    canEdit() {
      let canEdit = this.courseDetailData.state == "创作中" ? true : this.courseDetailData.state == "已发布" ? true : this.getUserIsAdmin ? true: false;
      return canEdit;
    },
    // 课程是否持续发布
    courseIsContinuousPublish() {
      return this.courseDetailData.isContinuousPublish;
    },
    // continuousReleaseCourseData() {
    //   let newCourseData = JSON.parse(JSON.stringify(this.courseDetailData));
    //   newCourseData.content.map((item) => {
    //     this.$set(item, "state", "完全同步");
    //     item.tasks.forEach((titem) => {
    //       if (titem.state === "未发布" || titem.state === "已修改未发布") {
    //         this.$set(item, "state", "未完全同步");
    //       }
    //     });
    //   });
    //   return newCourseData;
    // },
    filterTask() {
      let newCourseData = JSON.parse(JSON.stringify(this.courseDetailData));
      newCourseData.content.map((item) => {
        let newTasks = [];
        item.tasks.forEach((titem, tindex) => {
          if (
            (titem.tasks === "已发布" || titem.tasks === "已修改未发布") &&
            titem.isLockedForPublish
          ) {
            newTasks.push(titem);
          }
          // if (titem.isLockedForPublish && item.tasks[tindex]) {

          // }
        });
      });
      return newCourseData;
    },
    // 将客课程信息格式化
    getCourseDetailInfoObj() {
      let nCourseDetailInfo = Object.assign({}, this.courseDetailData);
      nCourseDetailInfo.taskGroups = {};
      nCourseDetailInfo?.content?.forEach((item) => {
        nCourseDetailInfo.taskGroups[item.taskGroupID] = Object.assign(
          {},
          item
        );
        nCourseDetailInfo.taskGroups[item.taskGroupID].tasks = {};
        item.tasks?.forEach((titem) => {
          nCourseDetailInfo.taskGroups[item.taskGroupID].tasks[titem.taskID] =
            Object.assign({}, titem);
          nCourseDetailInfo.taskGroups[item.taskGroupID].tasks[
            titem.taskID
          ].guidelines = {};
          titem.guidelines?.forEach((gitem) => {
            nCourseDetailInfo.taskGroups[item.taskGroupID].tasks[
              titem.taskID
            ].guidelines[gitem.guidelineID] = Object.assign({}, gitem);
          });
        });
      });
      return nCourseDetailInfo;
    },
    getUserIsAdmin() {
        return this.userInfo.regName == '21003' || this.userInfo.regName == '10241' || this.userInfo.regName == '10075'
    },
  },
  async created() {
    this.createCourseData()
    this.initSelectState()
  },
  // keep-alive页面每次进入执行
  activated() {
    /**
     * 重写ctrl+s保存按键
     */
    if ((this.isMyCaeate || this.isOtherDesiger) && this.canEdit) {
      this.rewriteCtrl_s(this)
    }
  },
  methods: {
    // 添加标签
    setTagsViewTitle(route) {
      if (this.$route.path === "/" || this.$route.path == "/designcourse") return;
      this.$store.dispatch("tagsView/updateVisitedView", route);
    },
    // 获取初始化数据
    async createCourseData() {
      const courseID = this.$route.query.courseID;
      if (courseID) {
        await this.fetchDesignCourseData({ id: courseID });
        if (!this.userList.length) this.$store.dispatch("user/getUserList")
      } else {
        const templateID = this.$route.query.templateID;
        if (templateID) {
          this.fetchDesignCourseData({ id: templateID });
          return;
        }
        this.formtCourseData(this.defaultCourseData);
        this.mainUserName = this.userInfo.realName
      }
    },

    // 获取课程数据
    fetchDesignCourseData(params) {
      const title = this.$route.meta.name;
      const route = Object.assign({}, this.$route, {
        title: ""
      });
      getDesigncourseData(params).then((res) => {
        if (res.errno === 0) {
          route.title = res.data.name ? res.data.name : ` ${title}-${this.$route.params.id}`,
            this.setTagsViewTitle(route);
          // 判断请求是否延迟 导致与课程数据不对应
          if (route.query.courseID == this.$route.query.courseID)
            this.formtCourseData(res.data);
        } else {
          this.$antdMessage.error({ content: res.message || res });
          // 清除url中的courseID参数
          this.$router.push({ query: {} });
          this.formtCourseData(this.defaultCourseData);
        }
      });
    },
    // 格式化数据
    formtCourseData(data, isRemoveTaskGruop) {
      if (this.$route.query.courseID && data.taskGroups) {
        formatCourseGroupTaskObj(data, this);
      }
      // 记录删除任务组、任务ID
      this.$set(data, "delTaskGroupIDs", []);
      this.$set(data, "delTaskIDs", []);
      // 记录修改过的字段
      this.$set(data, "updateFieldName", ["courseID", "lastUpdatedTime"]);
      // 判断是否清空课程数据  将已保存的任务组删除
      if (isRemoveTaskGruop) {
        data.delTaskGroupIDs = this.courseDetailData.content.filter(item => item.taskGroupID).map(item => item.taskGroupID)
        data.updateFieldName.push("delTaskGroupIDs")
        Object.keys(data).forEach(item => {
          if (item !== "updateFieldName") data.updateFieldName.push(item)
        })

        if (this.courseDetailData.courseID) {
          data.courseID = this.courseDetailData.courseID
        }
        if (this.courseDetailData.hasOpenToSelect) {
          data.hasOpenToSelect = this.courseDetailData.hasOpenToSelect
        }
      }
      // this.$set(data, "memo", "");
      // 是否有 content同步到json字段中 字段
      if (data.hasSyncToContent !== undefined) {
        this.$set(data, "hasSyncToContent", data.hasSyncToContent);
      } else {
        this.$set(data, "hasSyncToContent", false);
      }

      if (data.isContinuousPublish !== undefined) {
        this.$set(data, "isContinuousPublish", data.isContinuousPublish);
      } else {
        this.$set(data, "isContinuousPublish", false);
      }

      if (data.hasOpenToSelect !== undefined) {
        this.$set(data, "hasOpenToSelect", data.hasOpenToSelect);
      } else {
        this.$set(data, "hasOpenToSelect", false);
      }

      if (data.mainDesignerUserID === 0) {
        data.mainDesignerUserID = this.courseDetailData.mainDesignerUserID || this.userInfo.userID;
      }

      if (data.otherDesigerUserIDList) {
        data.otherDesigerUserIDList = data.otherDesigerUserIDList?.split(",").map(item => Number(item))
      }

      if (!data.content) return
      data.content.forEach((item, index) => {
        // 局部更新字段名称
        this.$set(item, "updateFieldName", ["courseID", "taskGroupID"]);
        // 设置新数据格式的字段
        data.courseID = Number(data.courseID);
        this.$set(item, "taskTotal", item.tasks.length);
        this.$set(item, "courseID", Number(data.courseID));
        this.$set(item, "taskGroupID", item.taskGroupID);

        this.$set(item, "memo", "");
        this.$set(item, "weightInCourse", item.weightInCourse);
        if (item.iconPath === "") {
          item.iconPath =
            this.taskGroupIconList[
            this.handelRandomIconPath(this.taskGroupIconList)
            ];
        }
        // 设置任务组的默认状态
        // 当前任务组下所有任务都是已发布状态那么 这个任务组的状态不会改变
        // this.$set(item, "state", "完全同步");

        // this.markCurrMaxTaskId.push({ groupIndex: item, maxTaskId: 1 })
        // const currTimeTaskId = new Date().getTime() + index
        //   this.$set(item, 'id', currTimeTaskId)
        item.tasks.forEach((titem, tindex) => {
          // 局部更新字段名称
          this.$set(titem, "updateFieldName", [
            "courseID",
            "taskGroupID",
            "taskID",
          ]);
          // 设置新数据格式的字段
          this.$set(titem, "courseID", data.courseID);
          this.$set(titem, "guidelineTotal", titem.guidelines.length);
          this.$set(titem, "taskGroupID", item.taskGroupID);
          this.$set(titem, "taskID", titem.taskID);


          if (data.isContinuousPublish) {
            if (titem.isSyncToPublic) {
              this.$set(titem, "state", "已发布");
            } else {
              if (titem.publishedCount > 0) {
                this.$set(titem, "state", "已修改未发布");
              } else {
                this.$set(titem, "state", "未发布");
              }
            }
          } else {
            if (titem.isSyncToPublic) {
              this.$set(titem, "state", "已发布");
            } else {
              this.$set(titem, "state", "未发布");
            }
          }

          // if (titem.state !== undefined) {
          //   this.$set(titem, "state", titem.state);
          //   // 任务原有状态为已发布 当前任务组的state就为已发布
          //   if (titem.state !== "已发布") {
          //     item.state = "未完全同步";
          //   }
          // } else {
          //   this.$set(titem, "state", "未发布");
          // }

          // 课程数据存在isLockedForPublish字段 使用原来的值
          if (titem.isLockedForPublish !== undefined) {
            this.$set(titem, "isLockedForPublish", titem.isLockedForPublish);
          } else {
            // 当前任务的状态为已发布 开启锁
            if (titem.state === "已发布") {
              this.$set(titem, "isLockedForPublish", true);
            } else {
              // 课程数据不存在isLockedForPublish字段 锁关闭
              this.$set(titem, "isLockedForPublish", false);
            }
          }

          // 是否有发布次数字段
          if (titem.publishedCount !== undefined) {
            this.$set(titem, "publishedCount", titem.publishedCount);
          } else {
            this.$set(titem, "publishedCount", 0);
          }

          // 是否有已同步字段
          if (titem.isSyncToPublic !== undefined) {
            this.$set(titem, "isSyncToPublic", titem.isSyncToPublic);
          } else {
            this.$set(titem, "isSyncToPublic", false);
          }
          
          // 是否有任务编码字段
          if (titem.taskCode) {
            this.$set(titem, "taskCode", titem.taskCode);
          } else {
            this.$set(titem, "taskCode", '');
          }

          // 是否有需自评字段
          if (titem.needSelfScore) {
            this.$set(titem, "needSelfScore", titem.needSelfScore);
          } else {
            this.$set(titem, "needSelfScore", false);
          }

          // 是否有访问控制字段
          if (titem.resultAccessType) {
            this.$set(titem, "resultAccessType", titem.resultAccessType);
          } else {
            this.$set(titem, "resultAccessType", '');
          }

          // 设置图标
          if (titem.iconPath === "") {
            titem.iconPath =
              this.taskIconList[this.handelRandomIconPath(this.taskIconList)];
          }

          this.$set(item, "memo", "");
          this.$set(titem, "weightInGroup", titem.weightInGroup);
          // this.markCurrMaxTaskId[index].maxTaskId = tindex + 1;
          const currTimeTaskId = new Date().getTime() + tindex;
          this.$set(titem, "id", currTimeTaskId);
          // this.markCurrMaxTaskId = tindex + 1;
          titem.guidelines.forEach((gitem, gindex) => {
            const currTimeGuidelineId = new Date().getTime() + gindex;
            this.$set(gitem, "id", currTimeGuidelineId);
            this.$set(gitem, "weightInTask", gitem.weightInTask);
            if (!gitem.foreignID) this.$set(gitem, "foreignID", 0);
            if (!gitem.foreign_title) this.$set(gitem, "foreign_title", "");
            if (titem.state === "已发布") {
              this.$set(gitem, "state", "已发布");
            } else {
              this.$set(gitem, "state", "未发布");
            }
            // this.$set(gitem, 'questionGroupDetail', {
            //   gid: null,
            //   title: '',
            // })
          });
          titem.guidelines.sort((prev, next) => {
            return prev.noInTask - next.noInTask;
          }); // 引导文升序排序
        });
        item.tasks.sort((prev, next) => {
          return prev.taskNoInGroup - next.taskNoInGroup;
        }); // 任务升序排序
      });
      data.content.sort((prev, next) => {
        return prev.groupNoInCourse - next.groupNoInCourse;
      }); // 任务组序排序

      this.courseDetailData = JSON.parse(JSON.stringify(data));
      this.courseIsContinuousPublishState = data.isContinuousPublish;
      if (
        (this.currGroupIndex || this.currGroupIndex === 0) &&
        !this.currTaskIndex &&
        this.currTaskIndex !== 0
      ) {
        this.currData = this.courseDetailData.content[this.currGroupIndex];
      }
      if (
        (this.currGroupIndex || this.currGroupIndex === 0) &&
        (this.currTaskIndex || this.currTaskIndex === 0)
      ) {
        this.currData =
          this.courseDetailData.content[this.currGroupIndex].tasks[
          this.currTaskIndex
          ];
      }
    },
    // // 格式化对象任务组、对象任务。   将任务组和任务格式化为 之前的数组对象格式
    // formatCourseGroupTaskObj(data) {
    //   this.$set(data, "content", []);
    //   Object.keys(data.taskGroups).forEach((item) => {
    //     // 将tasks对象 格式化为数组
    //     let markTasksArray = [];
    //     Object.keys(data.taskGroups[item].tasks).forEach((titem) => {
    //       markTasksArray.push(data.taskGroups[item].tasks[titem]);
    //       // 将引导文格式化为数组
    //       let markGuidelineArray = [];
    //       let guidelines = data.taskGroups[item].tasks[titem].guidelines;
    //       guidelines &&
    //         Object.keys(guidelines).forEach((gitem) => {
    //           markGuidelineArray.push(
    //             data.taskGroups[item].tasks[titem].guidelines[gitem]
    //           );
    //         });
    //       this.$set(
    //         data.taskGroups[item].tasks[titem],
    //         "guidelines",
    //         markGuidelineArray
    //       );
    //     });
    //     data.taskGroups[item].tasks = markTasksArray;
    //     data.content.push(data.taskGroups[item]);
    //   });
    // },
    // 撤消提交
    backEditSState() {
      this.handelupdateDesignCourseState("创作中");
    },
    // 预览课程
    handelpreview() {
      this.stepNum = 1;
      this.previewDialog = true;
    },
    // 打开持续提交对话框
    handleShowCPubDialog() {
      this.previewCourseDetail = true;
      this.stepNum = 1;
    },
    // 关闭持续发布对话框
    handleClosePreviewCourseDetailDialog() {
      this.stepNum = 0;
    },
    // 修改状态
    handelupdateDesignCourseState(str) {
      const params = {
        courseID: Number(this.$route.query.courseID),
        userID: this.userInfo.userID,
        state: str,
      };
      updateDesignCourseState(params).then((res) => {
        if (res.errno === 0) {
          Session.remove(`/d_api/designcourse/designcourselist`) // 清空缓存
          this.$antdMessage.success({
            content: "操作成功！",
          });
          this.courseDetailData.state = str;
          this.showConfirmCourseInfo = false;
        } else {
          this.$antdMessage.error({
            content: "操作失败！",
          });
        }
      });
    },
    // 删除课程
    handelDelete() {
      if (!this.$route.query.courseID) {
        this.$antdMessage.error({
          content: "课程未创建，无法删除！",
        });
        return;
      }
      if (this.courseDetailData.isContinuousPublish) {
        let checkHavePubTask = this.handleCheckHavePubTask();
        if (checkHavePubTask) {
          this.$antdMessage.warning({
            content: "课程含有已发布的任务，无法删除课程！",
          });
          return;
        }
      }
      let params = {
        courseID: Number(this.$route.query.courseID),
        userID: this.userInfo.userID,
      };
      deleteCourse(params).then((res) => {
        if (res.errno === 0) {
          this.$antdMessage.success({
            content: "删除成功！",
          });
          this.courseDetailData.state = "已删除";
          // this.handelupdateDesignCourseState("已删除");
        } else {
          this.$antdMessage.error({
            content: res.message || res,
          });
        }
      });
    },
    // 检查是否否有已发布的任务
    handleCheckHavePubTask() {
      let flag = false;
      this.courseDetailData.content.forEach((item) => {
        for (let i = 0; i < item.tasks.length; i++) {
          if (item.tasks[i].state === "已发布") flag = true;
        }
      });
      return flag;
    },
    // 帮助
    handelHelp() {
      this.$antdMessage.warning({
        content: "敬请期待！",
      });
    },
    // 关闭 返回创作系统主页
    closeEditPage() {
      this.$router.push({ name: "Designcourse" });
    },
    // 保存课程信息后清空所有数据
    handelConfirmSave() {
      this.handelUpdateCourseInfo().then((res) => {
        // 更新课程信息、创建课程 成功
        if (res) {
          const courseID = this.$route.query.courseID;
          if (courseID) this.$router.push({ query: {} });
          if (this.courseDetailData.isContinuousPublish) {
            this.handleClearTasksAndTask();
          }
          this.formtCourseData(this.defaultCourseData);
          this.initSelectState()
        }
      });
    },
    // 清空所有数据
    handelCancelSave() {
      this.initSelectState()
      if (this.courseDetailData.isContinuousPublish || this.courseDetailData.courseID) {
        this.formtCourseData(this.defaultCourseData, true);
      } else {
        this.formtCourseData(this.defaultCourseData);
      }
      console.log(this.courseDetailData);
      // this.destroyedBeforeunloadHandler();
    },
    // 初始化状态
    initSelectState() {
      this.$nextTick(() => {
        this.currShow = "course";
        this.currGroupIndex = null;
        this.currTaskIndex = null;
        this.currData = {};
      });
    },

    // 清空未发布的任务、任务组
    handleClearTasksAndTask() {
      let findPubTask = JSON.parse(JSON.stringify(this.courseDetailData));
      let GroupNHTask = [];
      findPubTask.content.map((item) => {
        item.tasks = item.tasks.filter((titem) => {
          return titem.state === "已发布";
        });
        if (item.tasks.length === 0) GroupNHTask.push(item);
      });
      // 通过找出两个数组不同的元素 过滤了没有任务的任务组
      let newGrouopContent = this.getFindDifferentEl(
        findPubTask.content,
        GroupNHTask
      );

      let NewDefaultCourseData = JSON.parse(
        JSON.stringify(this.defaultCourseData)
      );
      NewDefaultCourseData.content = newGrouopContent;
      NewDefaultCourseData.isContinuousPublish = true;
      // this.formtCourseData(NewDefaultCourseData),
      this.$nextTick(() => {
        this.currShow = "course";
        this.currData = {};
        this.currGroupIndex = null;
        this.currTaskIndex = null;
      });
    },

    // 找出数组中不同的元素
    getFindDifferentEl(a, b) {
      const arr = [...a, ...b];
      const newArr = arr.filter((item) => {
        return !(a.includes(item) && b.includes(item));
      });
      return newArr;
    },

    // 修改课程信息
    handelUpdateCourseInfo() {
      return new Promise((resolve, reject) => {
        if (this.updateCourseInfoIng) return
        this.updateCourseInfoIng = true
        const courseID = this.$route.query.courseID;
        if (courseID) {
          this.updateCourseInfo(courseID)
            .then((res) => {
              this.courseDetailData.delTaskGroupIDs = [];
              this.courseDetailData.delTaskIDs = [];
              this.isClear = false
              Session.remove(`/d_api/designcourse/designcourselist`) // 清空缓存
              Session.remove(`/api/curriculum/list`) // 清空缓存
              this.updateCourseInfoIng = false
              if (res) return resolve(true);
              resolve(false);
            })
            .catch((err) => {
              this.updateCourseInfoIng = false
              resolve(false);
            });
        } else {
          this.pushCourseInfo()
            .then((res) => {
              this.updateCourseInfoIng = false
              if (res) {
                this.currShow = "course";
                return resolve(true);
              }
              resolve(false);
            })
            .catch((err) => {
              this.updateCourseInfoIng = false
              resolve(false);
            });
        }
      });
    },
    // 更新课程数据
    updateCourseInfo(courseID) {
      return new Promise((resolve, reject) => {
        let params = JSON.parse(JSON.stringify(this.courseDetailData));
        params["courseID"] = Number(courseID);
        params.lastUpdatedTime = new Date().getTime()
        params.taskGroupTotal = this.groupCount;
        params.taskTotal = this.taskCount;
        // params.memo = undefined;
        params.taskGroups = {};
        const findUser = this.userList?.find(item => item.userID === params.mainDesignerUserID)
        if (findUser) {
          params["author_name"] =
            findUser?.realName ||
            findUser?.nickName ||
            findUser?.email ||
            findUser?.regName;
        }
        // 记录当前课程 无任务组ID的编号
        let markNoGroupId_Num = 1;
        params.otherDesigerUserIDList && (params.otherDesigerUserIDList = params.otherDesigerUserIDList.join(","))
        params.content.forEach((item, index) => {
          item.courseID = Number(this.$route.query.courseID);
          item.weightInCourse = Number(item.weightInCourse);
          item.groupNoInCourse = index + 1;
          // item.memo = undefined;
          item.state = undefined;
          item.taskTotal = item.tasks.length;
          // 定义新的存放任务的属性
          let newTasks = {};
          // 记录当前任务组 无任务ID的编号
          let markNoTaskId_Num = 1;
          item.tasks.forEach((titem, tindex) => {
            titem.courseID = Number(this.$route.query.courseID);
            titem.weightInGroup = Number(titem.weightInGroup);
            titem.taskNoInGroup = tindex + 1;
            // titem.memo = undefined;
            titem.id = undefined;
            titem.guidelineTotal = titem.guidelines.length;
            // 找到最大ID
            let maxID = titem.guidelines
              .map((gitem, index) => {
                if (gitem.guidelineID) {
                  return gitem.guidelineID;
                }
              })
              .filter((gitem) => gitem)
              .reverse()[0];
            maxID = !maxID && maxID !== 0 ? 0 : maxID;

            let newGuideline = {};
            titem.guidelines.forEach((gitem, gindex) => {
              gitem.weightInTask = Number(gitem.weightInTask);
              gitem.noInTask = gindex + 1;
              // gitem.memo = undefined;
              gitem.id = undefined;
              gitem.questionGroupDetail = undefined;
              gitem.state = undefined;
              if (gitem.guidelineID > maxID && gitem.guidelineID) {
                maxID = gitem.guidelineID;
              }
              if (!gitem.guidelineID) {
                gitem.guidelineID = maxID + 1;
                maxID++;
              }

              // 将引导文记录到对象中
              newGuideline[gitem.guidelineID] = gitem;
              // if (tindex === 2) {
              // }
            });

            // 将对象类型的的引导文 赋值到guidelines
            titem.guidelines = newGuideline;

            titem.taskGroupID = item.taskGroupID ? item.taskGroupID : undefined;

            // 过滤任务未修改的字段    需要处理所有字段未修改
            if (titem.updateFieldName.length > 3 || !titem.taskID) {
              let markTitem = Object.assign({}, titem);
              titem = {};
              if (!markTitem.taskID) {
                titem = markTitem;
                titem.taskID = undefined;
              } else {
                markTitem.updateFieldName.forEach((fitem) => {
                  titem[fitem] = markTitem[fitem];
                });
              }
              if (params.isContinuousPublish) {
                titem.isSyncToPublic = false
              }
              // 记录修改了任务字段，让任务组过滤未修改的字段时，保留tasks字段
              item.updateFieldName.push("tasks");
            } else if (titem.updateFieldName.length === 3 && titem.taskID) {
              this.$set(titem, "unAddTonewTasks", true);
            }
            // 最后修改任务的用户
            titem.lastUpdateAuthorID = this.userInfo.userID
            // debugger
            // 删除updateFieldName属性
            titem.updateFieldName = undefined;
            if (titem && !titem.unAddTonewTasks) {
              if (titem.taskID) {
                newTasks[titem.taskID] = titem;
              } else {
                titem.taskID = undefined;
                newTasks[`newtask${markNoTaskId_Num}`] = titem;
                titem["groupNoInCourse"] = item.groupNoInCourse;
                markNoTaskId_Num++;
              }
            }
          });
          // 将格式化的数据 赋值到tasks
          item.tasks = Object.assign({}, newTasks);
          newTasks = undefined;

          // 过滤任务组未修改的字段
          if (item.updateFieldName.length > 2 || !item.taskGroupID) {
            let markItem = Object.assign({}, item);
            item = {};
            if (!markItem.taskGroupID) {
              item = markItem;
              item.taskGroupID = undefined;
            } else {
              markItem.updateFieldName.forEach((fitem) => {
                item[fitem] = markItem[fitem];
              });
            }
            if (params.isContinuousPublish) {
              item.isSyncToPublic = false
            }
          } else if (item.updateFieldName.length === 2) {
            this.$set(item, "unAddTotaskGroups", true);
          }
          // 最后修改任务组的用户
          item.lastUpdateAuthorID = this.userInfo.userID
          // 删除updateFieldName属性
          item.updateFieldName = undefined;

          if (item && !item.unAddTotaskGroups) {
            // 将格式化后的任务组数据赋值到 taskGroups属性中
            if (item.taskGroupID) {
              params.taskGroups[item.taskGroupID] = item;
            } else {
              item.taskGroupID = undefined;
              params.taskGroups[`newgroup${markNoGroupId_Num}`] = item;
              markNoGroupId_Num++;
            }
          }
          // 如果任务组字段taskGroups 含有任务组对象 则在课程信息字段过滤时 保留taskGroups
          if (Object.keys(params.taskGroups).length)
            params.updateFieldName.push("taskGroups");
        });
        params.taskGroups = Object.keys(params.taskGroups).length
          ? params.taskGroups
          : undefined;
        params.content = undefined;
        params.delTaskGroupIDs = params.delTaskGroupIDs.length
          ? params.delTaskGroupIDs
          : undefined;
        params.delTaskIDs = params.delTaskIDs.length
          ? params.delTaskIDs
          : undefined;

        // 过滤课程信息未修改的字段
        if (params.updateFieldName.length > 1 || !params.taskGroupID) {
          let markItem = Object.assign({}, params);
          params = {};
          markItem.updateFieldName.forEach((fitem) => {
            params[fitem] = markItem[fitem];
          });
        }
        // 删除updateFieldName属性
        // params.updateFieldName = undefined;

        if (Object.keys(params).length === 1) {
          this.$antdMessage.warning({
            content: "暂无需要保存的数据！",
          });
          return;
        }
        updatedesigncourse(params)
          .then((res) => {
            if (res.errno === 0) {
              this.$antdMessage.success({
                content: "课程信息已更新",
              });
              this.isSave = true;
              if (res.data !== true) {
                this.formtCourseData(res.data);
              }
              const title = this.$route.meta.name;
              const route = Object.assign({}, this.$route, {
                title: ""
              });
              route.title = res.data.name ? res.data.name : ` ${title}-${this.$route.params.id}`,
                this.setTagsViewTitle(route);
              resolve(true);
            } else {
              this.$antdMessage.error({
                content: res.message || res,
              });
              resolve(false);
            }
          })
          .catch((err) => {
            resolve('err');
          });
      });
    },
    // 新建课程信息
    async pushCourseInfo(isSaveAs) {
      const _that = this;
      return await new Promise((resolve, reject) => {
        // 主设计师ID
        this.courseDetailData.mainDesignerUserID = this.userInfo.userID;
        // 发布用户ID
        // this.courseDetailData.pubUserID = this.userInfo.userID;
        // this.pubTime = new Date().getTime();
        let params = JSON.parse(JSON.stringify(this.courseDetailData));
        // 清除多余的参数
        // params.memo = undefined;
        params.courseID = undefined;
        params.pubTime = undefined;
        params.isTemplate = false;
        params.taskGroupTotal = this.groupCount;
        params.taskTotal = this.taskCount;
        params.lastUpdatedTime = new Date().getTime()
        params.otherDesigerUserIDList && (params.otherDesigerUserIDList = params.otherDesigerUserIDList.join(","))
        !params.courseType && (params.courseType = undefined)
        params["author_name"] =
          this.userInfo.realName ||
          this.userInfo.nickName ||
          this.userInfo.email ||
          this.userInfo.regName;
        params.content.forEach((item, index) => {
          item.isSyncToPublic = undefined
          item.publishedCount = undefined
          item.lastUpdatedAuthorID = undefined
          item.updateFieldName = undefined;
          item.groupNoInCourse = index + 1;
          item.memo = item.memo ? item.memo : "";
          item.weightInCourse = Number(item.weightInCourse);
          item.state = undefined;
          item.courseID = undefined;
          item.taskGroupID = undefined;
          item.tasks.forEach((titem, tindex) => {
            titem.isFinalTask = undefined
            titem.isLockedForPublish = undefined
            titem.taskCode = ''
            titem.needSelfScore = false
            titem.resultAccessType = '可公开'
            titem.isSyncToPublic = undefined
            titem.publishedCount = undefined
            titem.updateFieldName = undefined;
            titem.weightInGroup = Number(titem.weightInGroup);
            titem.taskNoInGroup = tindex + 1;
            titem.state = undefined;
            titem.memo = titem.memo ? titem.memo : "";
            titem.id = undefined;
            titem.taskGroupID = undefined;
            titem.taskID = undefined;
            titem.courseID = undefined;
            if (!params.isContinuousPublish) {
              titem.isLockedForPublish = undefined;
            }
            titem.isSyncToContent = undefined;
            titem.isSyncToPublic = undefined;
            titem.guidelines.forEach((gitem, gindex) => {
              gitem["guidelineID"] = gindex + 1;
              gitem.weightInTask = Number(gitem.weightInTask);
              gitem.noInTask = gindex + 1;
              gitem.id = undefined;
              gitem.state = undefined;
              gitem.memo = gitem.memo ? gitem.memo : "";
            });
            this.$set(
              titem,
              "guidelinesArray",
              JSON.parse(JSON.stringify(titem.guidelines))
            );
            titem.guidelines = undefined;
          });
          this.$set(item, "tasksArray", JSON.parse(JSON.stringify(item.tasks)));
          item.tasks = undefined;
        });
        this.$set(params, "taskGroupsArray", params.content);
        params.taskGroups = undefined;
        params.content = undefined;
        params.delTaskGroupIDs = undefined;
        params.delTaskIDs = undefined;
        params.updateFieldName = undefined;
        courseCreate(params)
          .then((res) => {
            if (res.errno === 0) {
              Session.remove(`/d_api/designcourse/designcourselist`) // 清空缓存
              this.$router.push({
                query: { courseID: res.data.courseID },
                params: { id: res.data.courseID },
              });
              _that.$antdMessage.success({
                content: "课程创建成功！",
              });
              // 另存为的课程不需要下面的步骤
              if (isSaveAs) return
              this.courseDetailData = this.defaultCourseData
              this.isSave = true;
              _that.formtCourseData(res.data);
              resolve(true);
            } else {
              _that.$antdMessage.error({
                content: res.message,
              });
              resolve(false);
            }
          })
          .catch((err) => {
            resolve(false);
          });
      });
    },

    // 提交课程信息 提交后课程信息不可保存
    handelConfirmCourseInfo() {
      this.handelupdateDesignCourseState("已提交");
    },

    // 检查课程基础信息
    handleCheckCourseInfo() {
      return new Promise((resolve, reject) => {
        if (this.courseDetailData.name === "") {
          this.$antdMessage.error({
            content: "课程名不能为空",
          });
          resolve(false);
          return;
        }
        if (this.courseDetailData.iconPath === "") {
          this.$antdMessage.error({
            content: "课程封面不能为空",
          });
          resolve(false);
          return;
        }
        if (this.courseDetailData.description === "") {
          this.$antdMessage.error({
            content: "课程简介不能为空",
          });
          resolve(false);
          return;
        }
        resolve(true);
      });
    },

    // 检查提交的课程数据
    handelCheckCourseData() {
      return new Promise((resolve, reject) => {
        let flag = false;
        this.handleCheckCourseInfo().then((res) => {
          // 检查课程基础信息是否为空
          if (!res) return resolve(false);
          this.courseDetailData.content.forEach((item, index) => {
            if (flag) return;
            if (item.name === "") {
              this.$antdMessage.error({
                content: `任务组名不能为空，(第${index + 1}个任务组)`,
              });
              flag = true;
              return;
            }
            if (flag) return;
            item.tasks.forEach((titem, tindex) => {
              if (flag) return;
              if (titem.name === "") {
                this.$antdMessage.error({
                  content: `任务名不能为空，(第${index + 1}个任务组-第${tindex + 1
                    }个任务)`,
                });
                flag = true;
                return;
              }
              if (flag) return;
              titem.guidelines.forEach((gitem, gindex) => {
                if (flag) return;
                if (gitem.description === "") {
                  this.$antdMessage.error({
                    content: `引导文内容不能为空，(第${index + 1}个任务组-第${tindex + 1
                      }个任务-第${gindex + 1}条引导文)`,
                  });
                  flag = true;
                  return;
                }
                if (
                  gitem.operType === "刷题" &&
                  !gitem.foreignID &&
                  !gitem.foreign_title
                ) {
                  this.$antdMessage.error({
                    content: `引导文类型为刷题需选择题组，(第${index + 1
                      }个任务组-第${tindex + 1}个任务-第${gindex + 1}条引导文)`,
                  });
                  flag = true;
                  return;
                }
              });
            });
          });
          if (flag) resolve(false);
          resolve(true);
        });
      });
    },

    // 切换编辑组件
    handelChangePage(string, item, index, pIndex) {
      this.currShow = string;
      if (string == "course") {
        this.currGroupIndex = null;
        this.currTaskIndex = null;
      }
      if (string == "taskGroup") {
        this.currData = Object.assign({}, item);
        this.currGroupIndex = index;
        this.currTaskIndex = null;
      }
      if (string == "task") {
        this.currData = Object.assign({}, item);
        this.currGroupIndex = pIndex;
        this.currTaskIndex = Number(index);
      }
    },
    // 刷新数据
    handelforceUpdate(gindex, tindex) {
      this.currShow = null;
      this.currShow = "task";
      this.currData = JSON.parse(
        JSON.stringify(this.courseDetailData.content[gindex].tasks[tindex])
      );
    },
    // 展开收缩层
    handelOpenCollapse(index) {
      this.$refs["creative-courseGroup"][index].handleHeaderClick();
    },
    // 值发生改变 将新的值保存
    handelChange(val, target, FieldName) {
      this.isSave = false;

      // this.courseDetailData = JSON.parse(JSON.stringify(this.courseDetailData))

      if (target === undefined) {
        Object.assign(this.courseDetailData, val);
      }

      if (target === "course") {
        if (
          val.currData.updateFieldName.indexOf(FieldName) === -1 &&
          FieldName
        ) {
          val.currData.updateFieldName.push(FieldName);
          this.$set(this.courseDetailData, "memo", val.currData.memo);
        }
      }

      // 任务组的状态未响应！！
      if (target === "taskGroup") {
        // 将修改的字段名记录到updateFieldName
        if (
          val.currData.updateFieldName.indexOf(FieldName) === -1 &&
          FieldName
        ) {
          val.currData.updateFieldName.push(FieldName);
          if (val.currData.lastUpdateAuthorID && val.currData.lastUpdateAuthorID !== this.userInfo.userID) {
            val.currData.updateFieldName.push("lastUpdateAuthorID");
            val.currData.lastUpdateAuthorID = this.userInfo.userID
          }
        }
        // val.currData.state = "未完全同步";
        // this.$set(
        //   this.courseDetailData.content,
        //   val.currGroupIndex,
        //   val.currData
        // );
        this.courseDetailData.content[val.currGroupIndex] = JSON.parse(
          JSON.stringify(val.currData)
        );
        this.$nextTick(() => {
          // this.$set(
          //   this.courseDetailData.content[val.currGroupIndex],
          //   "state",
          //   "未完全同步"
          // );
          this.$set(
            this.courseDetailData.content[val.currGroupIndex],
            "memo",
            val.currData.memo
          );
        });
        // this.$set(this.courseDetailData.content[val.currGroupIndex], "state", "未完全同步");
        // this.courseDetailData.content = JSON.parse(JSON.stringify(this.courseDetailData.content))
        // this.courseDetailData.content = Object.assign(
        //   this.courseDetailData.content[val.currGroupIndex],
        //   val.currData
        // );
      }

      if (target === "task") {
        // 将修改的字段名记录到updateFieldName
        if (val.currData.lastUpdateAuthorID && val.currData.lastUpdateAuthorID !== this.userInfo.userID) {
          val.currData.updateFieldName.push("lastUpdateAuthorID");
          val.currData.lastUpdateAuthorID = this.userInfo.userID
        }
        if (FieldName == "isFinalTask") {
          const haveFinalTask = this.getCourseIsHaveFinalTask(val, target, FieldName)
          if (haveFinalTask) {
            val.currData[FieldName] = !val
            this.$antdMessage.warning({ content: "课程已存在期末考核任务" })
          }
        }
        if (FieldName == "canVote" && val.currData[FieldName]) {
          this.handleCheckOperType(val, FieldName)
        }
        if (
          val.currData.updateFieldName.indexOf(FieldName) === -1 &&
          FieldName
        ) {
          val.currData.updateFieldName.push(FieldName);
          if (FieldName == "guidelines") {
            this.courseDetailData.content[
              val.currGroupIndex
            ].updateFieldName.push("tasks");
          }
        }

        // 判断任务内的引导文是否含有展示类型
        if (val.currData['canVote']) {
          this.handleCheckOperType(val, "canVote")
        }
        val.currData.state = '未保存'
        // // 将任务组的状态设为 未完全同步
        // if (
        //   val.currData.state === "已修改未发布" &&
        //   this.courseDetailData.content[val.currGroupIndex].state === "完全同步"
        // ) {
        //   this.courseDetailData.content[val.currGroupIndex].state =
        //     "未完全同步";
        // }
        this.courseDetailData.content[val.currGroupIndex].tasks[
          val.currTaskIndex
        ] = JSON.parse(JSON.stringify(val.currData));
      }
      // debugger
      this.courseDetailData = JSON.parse(JSON.stringify(this.courseDetailData));
      this.$forceUpdate();
      this.handelCheckGroupHaveTask();
    },
    // 判断任务是否含有展示类型的引导文，没有则将canVote设为false
    handleCheckOperType(val, FieldName) {
      let isHaveShow = false
      let notOnly = false
      const guidlines = val.currData.guidelines
      guidlines.forEach(item => {
        if (item.operType == "展示") {
          if (isHaveShow) notOnly = true
          isHaveShow = true
        }
      })
      if (notOnly) {
        val.currData[FieldName] = false
        return this.$antdMessage.warning({
          content: "允许投票的任务，引导文中必须含有一个展示类型，且不能存在多个展示类型!"
        })
      }
      if (!isHaveShow) {
        val.currData[FieldName] = false
        return this.$antdMessage.warning({
          content: "允许投票的任务，引导文中必须含有一个展示类型，且不能存在多个展示类型!"
        })
      }
    },
    // 检测课程是否存在期末考核任务
    getCourseIsHaveFinalTask(val, target, FieldName) {
      let taskGroups = this.courseDetailData.content
      let flag = false
      taskGroups.forEach(gitem => {
        if (flag) return
        gitem.tasks.forEach(titem => {
          if (flag) return
          if (titem[FieldName] && titem.id !== val.currData.id) return flag = true
        })
      })
      return flag
    },
    // 检测任务的引导文数量是否大于1
    // getTaskGuidelinesLengthExceed(val) {
    //   let taskGroups = this.courseDetailData.content
    //   let flag = false
    //   taskGroups.forEach(gitem => {
    //     if (flag) return
    //     gitem.tasks.forEach(titem => {
    //       if (flag) return
    //       if (titem.id === val.currData.id || titem.taskID == val.currData.taskID) {
    //         if (titem.guidelines.length > 1) return flag = true
    //       }
    //     })
    //   })
    //   return flag
    // },
    // 检查任务组内是否含有任务 如果任务组内的最后一个任务被删除 则添加一个新的任务
    handelCheckGroupHaveTask() {
      this.courseDetailData.content.forEach((item, index) => {
        if (!item.tasks.length) {
          this.handelPushTask(index, 0, 0);
        }
      });
    },
    // 保存
    handelSave() { },
    // 添加任务组
    handelPushGroup(gindex, tindex, distinguish) {
      if ((!this.isMyCaeate && !this.isOtherDesiger)) return;
      // 检测是否在已发布的任务组前插入任务组
      if (
        this.courseDetailData.content[gindex + 1] &&
        this.courseDetailData.content[gindex + 1].state === "完全同步"
      ) {
        this.$antdMessage.warning({
          content: "不能在已发布的任务组前插入新的任务！",
        });
        return;
      }
      // 如果是将当前任务截取
      if (distinguish === 0) {
        if (
          this.courseDetailData.content[gindex].tasks[tindex].state ===
          "已发布" ||
          this.courseDetailData.content[gindex].tasks[tindex].state ===
          "已修改未发布"
        ) {
          this.$antdMessage.warning({
            content: "不能将已发布的任务截取至其他任务组！",
          });
          return;
        }
      } else {
        // 查看下下一个任务组 或下面的任务组的状态是否已发布
        if (
          tindex !== this.courseDetailData.content[gindex].tasks.length - 1 &&
          (this.courseDetailData.content[gindex].tasks[tindex + 1].state ===
            "已发布" ||
            this.courseDetailData.content[gindex].tasks[tindex + 1].state ===
            "已修改未发布")
        ) {
          this.$antdMessage.warning({
            content: "不能将已发布的任务截取至其他任务组！",
          });
          return;
        }
      }

      this.visibleGroup = false;
      let addGroup = this.groupDefault;
      addGroup.authorID = this.userInfo.userID
      addGroup.allowOtherAuthor = false
      addGroup.lastUpdateAuthorID = this.userInfo.userID
      // 当前任务组下原有的任务
      let taskArr = this.courseDetailData.content[gindex].tasks;
      // 截取当前点击的任务及后所有任务
      let moveData = taskArr.splice(tindex + distinguish, taskArr.length);
      // 如果截取的任务为空
      if (!moveData.length) {
        moveData = JSON.parse(
          JSON.stringify([
            Object.assign(
              {
                updateFieldName: ["courseID", "taskGroupID", "taskNoInGroup"],
              },
              this.taskDefault, {
              authorID: this.userInfo.userID,
              allowOtherAuthor: false,
              lastUpdateAuthorID: this.userInfo.userID,
              state: '未保存'
            }
            ),
          ])
        );
      }
      // 当前任务组的任务都被截取 添加一个空的任务
      if (!taskArr.length) {
        this.courseDetailData.content[gindex].tasks = [
          Object.assign({}, this.taskDefault, { authorID: this.userInfo.userID, allowOtherAuthor: false, lastUpdateAuthorID: this.userInfo.userID }),
        ];
        this.courseDetailData.content[gindex].tasks[0]["updateFieldName"] = [
          "courseID",
          "taskGroupID",
          "taskNoInGroup",
        ];
        // 随机赋值默认图标
        this.courseDetailData.content[gindex].tasks[0].iconPath =
          this.taskIconList[this.handelRandomIconPath(this.taskIconList)];
      }
      // debugger
      // 给任务 任务组 随机赋值默认图标
      moveData[0].iconPath =
        this.taskIconList[this.handelRandomIconPath(this.taskIconList)];
      addGroup.iconPath =
        this.taskGroupIconList[
        this.handelRandomIconPath(this.taskGroupIconList)
        ];
      addGroup.tasks = JSON.parse(JSON.stringify(moveData));

      // 局部更新字段名称
      this.$set(addGroup, "updateFieldName", ["courseID", "groupNoInCourse"]);
      this.courseDetailData.content.splice(
        gindex + 1,
        0,
        Object.assign({}, addGroup)
      );
      this.handleSetGourpInCourse();
      // Object.assign(this.courseDetailData.content[gindex + 1], addGroup)
      // 重置任务组和任务的编号
      this.handleSetGourpInCourseAndTaskInGroup();
      // 等待渲染完成，refs才能获取到对象
      // this.$forceUpdate();
      this.$nextTick(() => {
        // 打开刚添加的任务组
        if (!this.$refs["creative-courseGroup"][gindex + 1].isActive)
          this.handelOpenCollapse(gindex + 1);
        this.currShow = "taskGroup";
        this.currGroupIndex = gindex + 1;
        this.currTaskIndex = null;
        this.currData = Object.assign(
          {},
          this.courseDetailData.content[gindex + 1]
        );
      });
    },
    // 重新设置任务组的编号
    handleSetGourpInCourse() {
      this.courseDetailData.content.map((item, index) => {
        item.groupNoInCourse = index + 1;
      });
    },
    // 添加任务
    handelPushTask(gindex, tindex, distinguish, data) {
      if ((!this.isMyCaeate && !this.isOtherDesiger)) return;
      // 在当前任务前新建任务
      if (distinguish === 0) {
        if (
          this.courseDetailData.content[gindex]?.tasks[tindex]?.state ===
          "已发布" ||
          this.courseDetailData.content[gindex]?.tasks[tindex]?.state ===
          "已修改未发布"
        ) {
          this.$antdMessage.warning({
            content: "不能在已发布的任务前插入新的任务！",
          });
          return;
        }
      } else if (distinguish === 1) {
        // 在当前任务后新建一个任务
        if (
          this.courseDetailData.content[gindex].tasks[tindex + distinguish] &&
          (this.courseDetailData.content[gindex].tasks[tindex + distinguish]
            .state === "已发布" ||
            this.courseDetailData.content[gindex].tasks[tindex + distinguish]
              .state === "已修改未发布")
        ) {
          this.$antdMessage.warning({
            content: "不能在已发布的任务前插入新的任务！",
          });
          return;
        }
      }
      this.visibleTask = false;
      let newTask = {}
      if (data) {
        newTask = JSON.parse(JSON.stringify(Object.assign({}, this.taskDefault, data, { authorID: this.userInfo.userID, allowOtherAuthor: false, lastUpdateAuthorID: this.userInfo.userID })));
      } else {
        newTask = JSON.parse(JSON.stringify(Object.assign({}, this.taskDefault, { authorID: this.userInfo.userID, allowOtherAuthor: false, lastUpdateAuthorID: this.userInfo.userID })));
        newTask.iconPath =
          this.taskIconList[this.handelRandomIconPath(this.taskIconList)];
      }
      // 设置唯一id
      const currTimeTaskId = new Date().getTime();
      newTask.id = currTimeTaskId;
      newTask.taskGroupID = this.courseDetailData.content[gindex].taskGroupID;
      newTask.state = '未保存'
      // 随机赋值默认图标
      // 局部更新字段名称
      if (!data) this.$set(newTask, "updateFieldName", [
        "courseID",
        "taskGroupID",
        "taskNoInGroup",
      ]);
      this.courseDetailData.content[gindex].tasks.splice(
        tindex + distinguish,
        0,
        newTask
      );
      this.handleSetGourpInCourseAndTaskInGroup();
      // 切换到添加的任务
      this.$nextTick(() => {
        this.currShow = "task";
        this.currGroupIndex = gindex;
        this.currTaskIndex = distinguish === 0 ? tindex : tindex + distinguish;
        this.currData = Object.assign(
          {},
          this.courseDetailData.content[gindex].tasks[tindex + distinguish]
        );
      });
    },
    // 重新设置任务组的编号和任务的编号
    handleSetGourpInCourseAndTaskInGroup() {
      this.courseDetailData.content.map((item, index) => {
        item.groupNoInCourse = index + 1;
        if (item.updateFieldName.indexOf("groupNoInCourse") === -1)
          item.updateFieldName.push("groupNoInCourse");
        item.tasks.map((titem, tindex) => {
          titem.taskNoInGroup = tindex + 1;
          titem.groupNoInCourse = index + 1;
          if (titem.updateFieldName.indexOf("taskNoInGroup") === -1) {
            titem.updateFieldName.push("taskNoInGroup");
          }
          titem.guidelines.map((gitem, gindex) => {
            gitem.noInTask = gindex + 1;
          });
        });
      });
    },
    // 删除任务组
    handelDeleteGroup(gindex) {
      if ((!this.isMyCaeate && !this.isOtherDesiger)) return;
      // 没有任务组返回
      if (this.courseDetailData.content.length == 1) return;
      let findPubTaks = this.courseDetailData.content[gindex].tasks.filter(
        (item) => item.state === "已发布" || item.state === "已修改未发布"
      );
      // if (findPubTaks.length) {
      //   this.$antdMessage.warning({
      //     content: "任务组内含有已发布的任务，不可删除！",
      //   });
      //   return;
      // }
      // 删除当前任务组
      if (this.courseDetailData.content.length) {
        // 记录删除的任务组ID
        if (this.courseDetailData.content[gindex].taskGroupID) {
          this.courseDetailData.delTaskGroupIDs.push(
            this.courseDetailData.content[gindex].taskGroupID
          );
          this.courseDetailData.updateFieldName.push("delTaskGroupIDs");
        }
        this.courseDetailData.content.splice(gindex, 1);
        this.currShow = "taskGroup";
        this.currGroupIndex = gindex == 0 ? gindex : gindex - 1;
        this.currTaskIndex = null;
        this.currData =
          this.courseDetailData.content[gindex == 0 ? gindex : gindex - 1];
      }
    },
    // 删除任务
    handelDeleteTask(gindex, tindex) {
      if ((!this.isMyCaeate && !this.isOtherDesiger)) return;
      const tasks = this.courseDetailData.content[gindex].tasks
      // if (
      //   tasks[tindex].state != "未发布" && tasks[tindex].state !== "未保存"
      // ) {
      //   this.$antdMessage.warning({
      //     content: "已发布的任务不可删除",
      //   });
      //   return;
      // }
      let currTaskGroup = tasks;
      if (currTaskGroup.length == 1) return;
      if (currTaskGroup.length) {
        // 将删除的任务ID记录
        if (tasks[tindex].taskID) {
          this.courseDetailData.delTaskIDs.push(
            tasks[tindex].taskID
          );
          this.courseDetailData.updateFieldName.push("delTaskIDs");
        }
        currTaskGroup.splice(tindex, 1);
        // 切换任务 显示
        if (tasks.length !== tindex) {
          this.currData = Object.assign(
            {},
            tasks[tindex]
          );
          this.currTaskIndex = tindex;
        } else {
          this.currData = Object.assign(
            {},
            tasks[tindex - 1]
          );
          this.currTaskIndex = tindex - 1;
        }
      }
    },
    // 发布课程所有内容后修改所有任务组、任务的状态
    handlePublishedCourse() {
      const cData = this.courseDetailData
      cData.content.forEach(item => {
        this.handlePublishedTaskGroup(item.taskGroupID)
        item.tasks.forEach(titem => {
          this.handlePublishedTask(item.taskGroupID, titem.taskID)
        })
      })
    },
    // 发布任务组所有任务后修改任务的状态
    handlePublishedTaskGroup(taskGroupID) {
      const cData = this.courseDetailData
      cData.taskGroups?.[taskGroupID]?.tasks?.forEach(item => {
        this.$set(item, 'state', '已发布')
      })

      const gData = cData.content?.find(item => item.taskGroupID == taskGroupID)
      gData?.tasks?.forEach(item => {
        this.$set(item, 'state', '已发布')
      })
    },
    // 发布任务后修改任务的状态
    handlePublishedTask(taskGroupID, taskID) {
      if (!taskGroupID || !taskID) return
      const cData = this.courseDetailData
      const tData = cData.taskGroups?.[taskGroupID]?.tasks?.find(item => item.taskID == taskID)
      if (tData) this.$set(tData, 'state', '已发布')

      const gData = cData.content.find(item => item.taskGroupID == taskGroupID)
      const g_tData = gData?.tasks?.find(item => item.taskID == taskID)
      if (g_tData) this.$set(g_tData, 'state', '已发布')
    },

    // 持续发布下一步
    handleContinuPubBtnNext() {
      this.stepNum = 2;
    },
    // 持续发布上一步
    handleContinuPubBtnPrev() {
      this.stepNum = 1;
    },
    // 随机获取默认图标
    handelRandomIconPath(arr) {
      return Math.floor(Math.random() * (arr.length - 1)) + 1;
    },
    // 拖拽 开始移动
    onStart() {
      this.drag = true;
    },
    // 拖拽 结束移动
    onEnd() {
      this.drag = false;
    },
    // 拖拽 顺序发生改变
    update(gindex) {
      this.isSave = false;
      this.currShow = "taskGroup";
      this.currGroupIndex = gindex;
      this.currTaskIndex = null;
      this.currData = this.courseDetailData.content[gindex];
      this.handleSetGourpInCourseAndTaskInGroup();
    },
    // 拖拽 从一个数组拖拽到另外一个数组时触发的事件
    add() {
      this.handelCheckGroupHaveTask();
    },
    // 打开提交弹出框
    handelShowConfirmDialog() {
      this.showConfirmCourseInfo = true;
      if (!this.$route.query.courseID) {
        this.$antdMessage.warning({
          content: "该课程还未创建，暂无法提交！",
        });
      }
    },
    /**
     * @description 弹出删除任务、任务组的对话框
     */
    handleShowDeleteDialog(gindex, tindex, publishedCount, item, currDelete) {
      this.markDeleteGIndex = gindex || gindex === 0 ? gindex : false;
      this.markDeleteTIndex = tindex || tindex === 0 ? tindex : false;
      this.currDeleteObj = currDelete;
      if (publishedCount) {
        // if (this.$route.params.id == 33) return this.showDeleteTips = true
        if (this.currDeleteObj === 'task') {
          this.handleDeleteTask(gindex, tindex, item)
          // this.$antdMessage.warning({
          //   content: "已发布的任务无法删除！",
          // });
        }
        if (this.currDeleteObj === 'group') {
          this.handleDelelteGroup(gindex, item)
          // this.$antdMessage.warning({
          //   content: "已发布的任务组无法删除！",
          // });
        }
        return;
      }
      this.showDeleteTips = true;
    },
    // 删除任务组
    handleDelelteGroup(gindex, item) {
      this.$confirm(
        "将同时删除学习系统里的任务组，需慎重处理",
        {
          title: "提示",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          callback: (action) => {
            if (action == 'confirm') {
              {
                deleteGroup(item).then(res => {
                  console.log(res);
                  if (res.errno == 0) {
                    this.handelDeleteGroup(gindex);
                  } else {
                    this.$antdMessage.error({ content: res.message || '删除任务组失败' })
                  }
                }).catch(err => console.log(err))
              }
            }
          },
        }
      );
    },
    // 删除任务
    handleDeleteTask(gindex, tindex, item) {
      this.$confirm(
        "将同时删除学习系统里的任务，需慎重处理!",
        {
          title: "提示",
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning",
          callback: (action) => {
            if (action == 'confirm') {
              deleteTask(item).then(res => {
                console.log(res);
                if (res.errno === 0) {
                  this.handelDeleteTask(gindex, tindex);
                } else {
                  this.$antdMessage.error({ content: res.message || '删除任务失败' })
                }
              }).catch(err => console.log(err))
            }
          },
        }
      );
    },
    /**
     * @description 确认删除任务、任务组
     */
    handleConfirmDelete() {
      this.showDeleteTips = false;
      if (this.currDeleteObj === "group") {
        this.handelDeleteGroup(this.markDeleteGIndex);
        return;
      }
      if (this.currDeleteObj === "task") {
        this.handelDeleteTask(this.markDeleteGIndex, this.markDeleteTIndex);
      }
    },

    //禁用页面的ctrl功能，来禁止ctrl+s保存功能
    async ctrl_sSaveData(e) {
      if (
        e.keyCode == 83 &&
        (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)
      ) {
        e.preventDefault();
        await this.handelUpdateCourseInfo();
        if (this.currShow == "task") {
          this.$refs.taskComponent.handleOpenedEdit();
        }
      }
    },
    // 重写ctrl+s功能
    rewriteCtrl_s(that) {
      window.document.addEventListener("keydown", that.ctrl_sSaveData);
    },
    // 移除ctrl+s保存
    removeRewriteCtrl_s(that) {
      window.document.removeEventListener("keydown", that.ctrl_sSaveData);
    },

    //添加beforeunload监听事件 离开、关闭页面
    createBeforeunloadHandler() {
      if (this.isLinstened) return;
      this.isLinstened = true;
      // window.onbeforeunload = function () {
      //   return "还有信息未保存";
      // };
      window.addEventListener("beforeunload", this.beforeunloadHandler, false);
    },
    //移除beforeunload事件
    destroyedBeforeunloadHandler() {
      window.removeEventListener(
        "beforeunload",
        this.beforeunloadHandler,
        false
      );
      this.isLinstened = false;
    },
    /**
     * @description beforeunload监听事件 MDN Web Docs https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event
     */
    beforeunloadHandler: (event) => {
      // Cancel the event as stated by the standard.
      event.preventDefault();
      // Chrome requires returnValue to be set.
      event.returnValue = "";
    },
    /**
     * @description 添加切换路由监听 检测数据是否尚未保存
     */
    async leaveRouteBefore(next, action) {
      const getUserInfo = Session.get('userInfo', true)
      if (action === "confirm" && getUserInfo) {
        this.destroyedBeforeunloadHandler();
        const courseID = Number(this.$route.query.courseID);
        if (courseID) {
          let isSave = await this.updateCourseInfo(courseID);
          if (isSave) next();
        } else {
          let isSave = await this.pushCourseInfo();
          if (isSave) next();
        }
      } else {
        this.destroyedBeforeunloadHandler();
        next();
      }
    },
    /**
     * @description 检查数据是否已保存
     */
    beforLeaveCheckIsSave(next) {
      if (!this.isSave && (this.isMyCaeate || this.isOtherDesiger) && this.canEdit) {
        this.$confirm(
          "修改的数据未保存，确定将自动保存数据，取消则不保存数据！",
          {
            title: "提示",
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            callback: (action) => {
              this.leaveRouteBefore(next, action);
            },
          }
        );
      } else {
        next();
      }
    },
    // 导入
    async handleImport(files) {
      let uploadForm = new FormData();
      let hashArray = [];
      for (let item of files) {
        let hash = await encryptionToString({ raw: item.raw });
        if (hash === "Fto5o-5ea0sNMlW_75VgGJCv2AcJ") {
          this.$antdMessage.error({
            content: "文件读取错误！",
          });
          return;
        }
        if (hash) hashArray.push(hash);
        let fileName = item.name;
        uploadForm.append("file", item.raw, fileName);
        uploadForm.append(
          "courseInfo",
          JSON.stringify({
            userID: this.userInfo.userID,
            // 文件内容hash
            FileHashArray: JSON.stringify(hashArray),
          })
        );
      }


      // const params = Object.assign({}, this.courseDetailData)
      // delete params.content
      // delete params.delTaskGroupIDs
      // delete params.delTaskIDs
      // delete params.taskGroupsArray
      // delete params.taskGroupsArray
      // delete params.updateFieldName
      // delete params.courseID
      importDesCourse(uploadForm).then((res) => {
      });
    },
    // 导出json
    handleExport() {
      const params = { courseID: this.courseDetailData.courseID }
      exportDesCourseToJson(params).then((res) => {
        this.dataToFile(JSON.stringify(res), '.json')
      });
    },
    handleExportDocx() {
      const params = { courseID: this.courseDetailData.courseID }
      exportDesCourseToWord(params).then((res) => {
        this.dataToFile(res, '.docx')
      });
    },
    // 下载数据为文件
    dataToFile(res, fileType) {
      var filename = this.courseDetailData.name + fileType //下载后文件名
      var blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' }); // 类型 word
      var downloadElement = document.createElement('a');
      var href = window.URL.createObjectURL(blob); //创建下载的链接
      downloadElement.href = href;
      downloadElement.download = filename
      document.body.appendChild(downloadElement);
      downloadElement.click(); //点击下载
      document.body.removeChild(downloadElement); //下载完成移除元素
      window.URL.revokeObjectURL(href); //释放掉blob对象 
    },
    // 发布课程
    handelOpenCourse(item) {
      publishDesigncourse({
        courseID: Number(this.courseDetailData.courseID),
        userID: Number(this.userInfo.userID),
      }).then((res) => {
        if (res.errno === 0) {
          this.show = false;
          this.$antdMessage.success({
            content: "发布成功",
          });
          const params = {
            courseID: Number(this.courseDetailData.courseID),
            userID: this.userInfo.userID,
            state: "已发布",
          };
          this.handlePublishedCourse() // 修改所有任务组、任务的状态为已发布
          Session.remove(`/d_api/designcourse/designcourselist`) // 清空缓存
          updateDesignCourseState(params).then((res) => {
            this.$store.dispatch("courses/fetchDesignCourses", { that: this })
            // this.fetchCourselist();
            // if (res.errno === 0) {
            // } else {
            // }
          });
        } else {
          this.show = false;
          this.$antdMessage.error({
            content: res.message,
          });
        }
      });
    },
    // 复制任务数据
    copyTask(titem) {
      copy(JSON.stringify(titem))
    }
  },
  mounted() {
    if ((this.isMyCaeate || this.isOtherDesiger) && this.canEdit) this.createBeforeunloadHandler();
  },
  deactivated() {
    this.removeRewriteCtrl_s(this)
  },
  beforeDestroy() {
    // 页面销毁前 移除监听事件
    this.destroyedBeforeunloadHandler();
  },
  beforeRouteLeave(to, from, next) {
    this.beforLeaveCheckIsSave(next);
  },
};
</script>

<style lang="stylus">
.creativeEdit {
  padding-bottom: 30px;
  margin: 0 auto;
  max-width: 1200px;
  // padding: 0 55px 30px 55px;
  display: flex;
  justify-content: space-between;
  min-height: calc(100vh - 74px - 148px - 20px);

  .sidebar {
    margin-top: 30px;
    width: 300px;

    .componentsBreadcrumb {
      margin-bottom: 15px;

      span {
        color: #191919 !important;
      }
    }

    .courseHead {
      width: 300px;
      height: 222px;
      background-color: #eaeef3;
      box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.16);
      border-radius: 10px;
      // border: solid 1px #eaedee;
      overflow: hidden;

      .btnBox {
        display: flex;
        height: 63px;
        background-color: #e4e8ee;
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
        border-radius: 5px;
        border-top-right-radius: 5px;
        border-top-left-radius: 5px;
        overflow: hidden;

        span {
          flex: 1;
          display: block;

          .el-popover__reference-wrapper {
            width: 100%;

            button {
              width: 100%;
              height: 65px;
              border-right: 1px solid #dfdfdf;
              border-radius: 0;
            }
          }

          .el-button {
            background-color: #EFEFEF;
          }
        }

        button {
          padding: 0;
          flex: 1;
          cursor: pointer;
          outline: none;
          border: 0;
          border-right: 1px solid #dfdfdf;
          font-weight: bold;
          font-family: Agency FB;
          font-size: 20px;
          color: #000000;
        }

        button:last-child {
          border-right: 0;
        }

        button:hover {
          background: rgba(250, 250, 250, 0.9);
        }
      }

      .preview {
        cursor: pointer;
        margin: 11px 15px 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 275px;
        height: 139px;
        background-color: #ffffff;
        box-shadow: 0px 8px 16px 0px rgba(149, 126, 126, 0.15);
        border-radius: 5px;
        border: solid 1px #707070;

        .coursePic {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 113px;
          height: 66px;
          background-color: #ffffff;
          box-shadow: 0px 8px 16px 0px rgba(149, 126, 126, 0.15);
          border-radius: 5px;
          border: solid 1px #707070;

          img {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }

          .noneImg {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            img {
              display: inline-block;
              width: 42px;
              height: 42px;
            }

            .tips {
              font-family: MingLiU-ExtB;
              font-size: 12px;
              color: rgba(184, 182, 182, 0.5);
            }
          }
        }

        .havePic {
          border: none;
        }

        .courseName {
          padding-left: 10px;
          margin-left: 11px;
          width: 122px;
          height: 35px;
          line-height: 35px;
          background-color: #ffffff;
          border: dashed 1px #707070;
          font-family: MingLiU-ExtB;
          font-weight: bold;
          font-size: 14px;
          color: rgba(112, 112, 112, 0.5);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .nEmpty {
          border: solid 1px #707070;
          color: rgba(112, 112, 112, 1);
        }
      }
    }

    .courseGroup {
      padding: 0 0 30px 0;
      margin-top: 20px;
      width: 299px;
      height: 675px;
      background-color: rgba(234, 238, 243, 0.5);
      box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.08);
      border-radius: 5px;
      overflow-y: auto;

      .el-collapse {
        // width: 269px;
        border: none;

        .el-collapse-item {
          padding: 10px 0 20px;
          margin-top: 15px;
          border-radius: 5px;

          > div:hover {
            .addIcon {
              display: flex;
            }

            .deleteIconGroup {
              display: block;
            }
          }

          .el-collapse-item__header {
            position: relative;
            margin: 0 53px 0 36px;
            padding-right: 15px;
            height: 47px;
            width: 211px;
            background-color: #e4e8ee;
            box-shadow: 0px 8px 16px 0px rgba(166, 174, 187, 0.16);
            border: 1px solid #e4e8ee;
            border-radius: 27px;

            .headBox {
              position: relative;
              display: flex;
              align-items: center;
              width: 100%;
              height: 100%;

              .lineBox {
                width: 100%; 
                position: absolute; 
                bottom: -32px; 
                max-width: unset;
                user-select: none;

                .weightInCourseLine {
                  height: 3px; 
                  background: yellow; 
                  display: inline-block; 
                  border-radius: 5px; 
                  position: relative; 
                  z-index: 1;
                }

                .weightInCourseValue {
                  font-size: 12px; 
                  position: absolute; 
                  right: 0;     
                  z-index: 2; 
                  font-style: oblique; 
                  font-weight: bold; opacity: .5;
                }

                .weightInCourseLineDefault {
                  width: 100%; 
                  height: 3px; 
                  background: rgba(0,0,0,.1); 
                  display: inline-block; 
                  position: absolute; 
                  bottom: 20px; 
                  border-radius: 5px; 
                  left: 0;
                }
              }
            }

            .taskGroupIcon {
              margin-left: 1px;
              width: 44px;
              height: 44px;
              line-height: 1;
              border-radius: 50%;
              background: #ffffff;
              overflow: hidden;

              img {
                object-fit: cover;
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }

            .taskGroupName {
              max-width: 60%;
              margin-left: 12px;
              font-family: PMingLiU-ExtB;
              font-weight: bold;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.88);
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .icondown2Box {
              margin: 0 0 0 auto;
              transition: all 0.2s linear;
            }

            .addIcon {
              position: absolute;
              top: 50%;
              bottom: 50%;
              left: -30px;
              display: none;
              align-items: center;
              justify-content: flex-start;
              width: 50px;
              height: 50px;
              transform: translate(0, -50%);

              i {
                display: flex;
                align-items: center;
                font-size: 27px;
                color: #707070;
              }

              i::before {
                height: 27px;
                display: flex;
                align-items: center;
              }

              i:hover {
                color: rgba(45, 110, 146, 0.76);
              }
            }

            .deleteIcon, .deleteIconGroup {
              position: absolute;
              right: -61px;
              display: none;
              opacity: 0.5;

              img {
                object-fit: cover;
                width: 100%;
                height: 100%;
              }
            }

            .el-icon-arrow-right {
              display: none;
            }
          }

          // .el-collapse-item__header:hover {
          // .deleteIcon {
          // display: block;
          // }

          // .addIcon {
          // display: flex;
          // }
          // }
          .is-active {
            .icondown2Box {
              transform: rotate(180deg);
            }
          }

          .el-collapse-item__wrap {
            padding: 12px 0 0;
            border: none;
            background: rgba(255, 255, 255, 0);
          }

          .el-collapse-item__wrap {
            overflow: unset !important;

            .el-collapse-item__content {
              padding-top: 12px;
              padding-bottom: 0;

              /* 选中样式 */
              .chosen {
                .taskContent {
                  border: solid 2px #3089dc !important;
                }
              }

              .taskContentBox {
                padding: 14px 0;

                .taskContent {
                  margin: 0 45px 0 36px;
                  cursor: pointer;
                  position: relative;
                  margin-top: 38px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  width: 220px;
                  height: 139px;
                  background-color: #ffffff;
                  box-shadow: 6px 8px 10px 0px rgba(0, 0, 0, 0.15);
                  border-radius: 5px;
                  border: solid 1px #ffffff;

                  .numBox {
                    position: absolute;
                    top: 5px;
                    left: 7px;
                    font-weight: bold;
                    font-family: PMingLiU-ExtB;
                    font-size: 14px;
                    color: #0a0a0a;
                  }

                  .weightInGroup {
                    position: absolute;
                    bottom : 0;
                    left: 7px;
                    font-weight: bold;
                    font-family: PMingLiU-ExtB;
                    font-size: 14px;
                    color: #0a0a0a;
                    font-style: oblique;
                    opacity: 0.5;
                  }

                  .taskLock {
                    position: absolute;
                    bottom: 0;
                    right: 27px;
                  }

                  .publishedIcon {
                    position: absolute;
                    bottom: 0;
                    right: 7px;

                    i {
                      color: #5AD551;
                    }
                  }

                  .taskPic {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 52px;
                    height: 50px;
                    border: dashed 1px #707070;
                    // border-radius: 50%;
                    overflow: hidden;

                    img {
                      object-fit: cover;
                      width: 100%;
                      height: 100%;
                    }

                    .noneImg {
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;

                      img {
                        display: inline-block;
                        width: 27px;
                        height: 27px;
                      }

                      .tips {
                        font-size: 12px;
                        color: rgba(184, 182, 182, 0.5);
                      }
                    }
                  }

                  .havePic {
                    border-radius: 50%;
                    border: none;
                  }

                  .taskName {
                    padding-left: 10px;
                    margin-left: 5px;
                    width: 130px;
                    height: 27px;
                    background-color: #dcdbdb;
                    border-radius: 5px;
                    border: solid 1px #dcdbdb;
                    font-weight: bold;
                    font-family: MingLiU-ExtB;
                    font-size: 14px;
                    color: rgba(112, 112, 112, 0.5);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }

                  .nEmpty {
                    background-color: rgba(254, 169, 27, 0.5);
                    // border: solid 1px #707070;
                    color: rgba(112, 112, 112, 1);
                  }

                  .addIcon {
                    position: absolute;
                    top: -26px;
                    left: -30px;
                    display: none;
                    align-items: flex-start;
                    justify-content: flex-start;
                    height: 50px;
                    width: 50px;

                    i {
                      display: flex;
                      align-items: center;
                      font-size: 27px;
                      color: #707070;
                    }

                    i::before {
                      height: 27px;
                      display: flex;
                      align-items: center;
                    }

                    i:hover {
                      color: rgba(45, 110, 146, 0.76);
                    }
                  }

                  .pushdown {
                    top: unset;
                    bottom: -31px;
                    align-items: flex-end;
                  }

                  .deleteIcon {
                    cursor: pointer;
                    position: absolute;
                    right: 3px;
                    top: 3px;
                    display: none;

                    img {
                      object-fit: cover;
                      width: 100%;
                      height: 100%;
                    }
                  }

                  .copy {
                    cursor: pointer;
                    position: absolute;
                    right: 35px;
                    top: 7px;
                    display: none;
                    line-height: 1;
                    i {
                      font-size: 22px
                    }
                  }
                }

                .acitveTask {
                  border-color: #fed48c;
                }

                .taskContent:first-child {
                  margin-top: 0;
                }

                .taskContent:hover {
                  .deleteIcon {
                    display: block;
                  }

                  .copy {
                    display: block;
                  }
                }
              }

              .taskContentBox:hover {
                .taskContent {
                  .addIcon {
                    display: flex !important;
                  }
                }
              }
            }
          }

          .v-leave-to {
            overflow: hidden !important;
          }
        }

        .groupAcitve {
          background: #d4dfe6;
        }

        .item-active {
          .el-collapse-item__header {
            border: 1px solid #fed48c;
          }
        }

        .el-collapse-item > div:first-child {
          position: sticky;
          top: 0;
          z-index: 99;
        }
      }
    }

    .courseGroup::-webkit-scrollbar {
      width: 4px;
      height: 1px;
    }

    /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
    .courseGroup::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 1px #bfc4c3;
      background: #ccc;
      border-radius: 10px;
    }

    /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
    .courseGroup::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.18);
      // background: rgba(195, 197, 198, 0.18);
      border-radius: 4px;
    }
  }

  .edit-main {
    flex: 1;
    margin-top: 46px;
    margin-left: 50px;
    max-width: 1405px;

    .inputTips {
      cursor: default;
      display: table;
      margin: 0 0 0 auto;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 130px;
      font-family: PMingLiU-ExtB;
      font-size: 12px;
      color: #707070;

      .mustInput {
        font-family: PMingLiU-ExtB;
        font-size: 20px;
        color: #f8060e;
      }

      .choiceInput {
        font-family: PMingLiU-ExtB;
        font-size: 20px;
        color: #fed48c;
      }
    }

    .startMustTips {
      cursor: default;
      position: absolute;
      left: -20px;
      top: 0;
      font-family: PMingLiU-ExtB;
      font-size: 20px;
      color: #f8060e;
    }

    .startChoiceTips {
      cursor: default;
      position: absolute;
      left: -20px;
      top: 0;
      font-family: PMingLiU-ExtB;
      font-size: 20px;
      color: #fed48c;
    }

    .inputName {
      margin-bottom: 10px;
      line-height: 1;
      font-family: PMingLiU-ExtB;
      font-size: 16px;
      color: #fed48c;
    }

    .is-disabled {
      cursor: not-allowed;
      background: #f6f6f6 !important;
      border-radius: 10px;
      color: #898989 !important;

      .el-input__inner {
        // border: none !important;
        background: #f6f6f6 !important;
        color: #898989 !important;
      }

      .el-textarea__inner {
        background: #f6f6f6 !important;
        color: #898989 !important;
      }
    }
  }

  .el-dialog__wrapper {
    .previewCourse, .confirmCourseInfo {
      height: 90vh;
      overflow-y: scroll;

      .el-dialog__header {
        padding: 0;

        .el-dialog__title {
          display: none;
        }

        .el-dialog__headerbtn {
          .el-dialog__close {
            opacity: 0;
            font-size: 22px;
            color: #f1ae3d;
            transition: all 0.2s linear;
          }
        }
      }

      .el-dialog__body {
        margin: 0 auto;
        width: 90%;

        .courseInfo {
          display: flex;

          .courseIconPath {
            position: relative;
            width: 288px;
            height: 193px;

            img {
              object-fit: cover;
              width: 288px;
              height: 193px;
              border-radius: 5px;
            }
          }

          .courseDescBox {
            padding-top: 10px;
            margin-left: 25px;
            flex: 1;

            .courseName {
              position: relative;
              font-family: Segoe UI;
              font-weight: bold;
              font-size: 22px;
              color: #000000;
            }

            .designUser, .groupCount, .taskCount {
              margin-top: 7px;
              font-family: Segoe UI;
              font-size: 16px;
              color: #000000;
            }
          }
        }

        .introduction, .taskForce {
          max-width: unset;
        }
      }
    }

    .confirmCourseInfo {
      .el-dialog__body {
        .courseInfo {
          .mustInput {
            cursor: pointer;
            position: absolute;
            top: 12px;
            left: -20px;
            font-family: PMingLiU-ExtB;
            font-size: 20px;
            color: #f8060e;
            transform: translate(0, -50%);

            img {
              cursor: pointer;
              object-fit: cover;
              width: 12px !important;
              height: 12px !important;
              border-radius: 0;
            }
          }

          .courseDescBox {
            .confirmBtnBox {
              margin-top: 10px;
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .confirmBtn {
                cursor: pointer;
                outline: none;
                width: 80px;
                height: 30px;
                background-color: #0e79c0;
                border-radius: 5px;
                border: none;
                font-family: Segoe UI;
                font-size: 16px;
                color: #ffffff;
              }

              .disabledBtn {
                cursor: not-allowed;
                background-color: #dcdbdb;
              }

              .iconBox {
                margin-left: 21px;

                img {
                  cursor: pointer;
                  width: 12px;
                  height: 12px;
                  object-fit: cover;
                }
              }

              .mustIcon {
                cursor: pointer;
                font-family: PMingLiU-ExtB;
                font-size: 20px;
                color: #f8060e;
              }

              .chioceIcon {
                cursor: pointer;
                font-family: PMingLiU-ExtB;
                font-size: 20px;
                color: #fed48c;
              }

              .tips {
                margin-left: 10px;
                font-family: Segoe UI;
                font-size: 12px;
                color: #000000;
              }
            }
          }
        }
      }
    }

    .previewCourse:hover, .confirmCourseInfo:hover {
      .el-dialog__header {
        .el-dialog__headerbtn {
          .el-dialog__close {
            opacity: 1;
          }
        }
      }
    }

    .previewCourse::-webkit-scrollbar, .confirmCourseInfo::-webkit-scrollbar {
      width: 3px;
      height: 1px;
    }

    /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
    .previewCourse::-webkit-scrollbar-thumb, .confirmCourseInfo::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 1px #bfc4c3;
      background: #dcdcdc;
      border-radius: 10px;
    }

    /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
    .previewCourse::-webkit-scrollbar-track, .confirmCourseInfo::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.18);
      // background: rgba(195, 197, 198, 0.18);
      border-radius: 4px;
    }

    .deleteGroupTaskDialog {
      margin-top: 35vh !important;
      // transform: translate(0, 225%);
      max-width: 360px;
      min-width: 300px;
      height: 160px;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.06);
      border-radius: 4px;
      border: solid 1px #e4e7ed;

      .el-dialog__header {
        padding: 0;
        padding-top: 30px;
        text-align: center;
        font-family: PMingLiU-ExtB;
        font-weight: bold;
        font-size: 20px;
        color: #333;

        .el-dialog__title {
          font-family: GTEestiProDisplay-Regular;
          font-size: 18px;
          color: #303133;
        }
      }

      .el-dialog__body {
        padding: 5px 30px 0;
        text-align: center;
      }

      .el-dialog__footer {
        padding: 0;
        margin-top: 25px;
        text-align: center;

        .el-button {
          padding: 0;
          width: 77px;
          height: 28px;
          border-radius: 100px;
        }
      }
    }

    .previewCourseDetail {
      height: 90vh;
      overflow-y: scroll;

      .el-dialog__header {
        text-align: center;
        font-family: PMingLiU-ExtB;
        font-weight: bold;
        font-size: 20px;
        color: #333;
      }

      .el-dialog__body {
        margin: 0 auto;
        width: 90%;
      }

      .continuousReleaseBox {
        .courseInfo {
          display: flex;

          .courseIconPath {
            position: relative;
            width: 288px;
            height: 193px;

            img {
              object-fit: cover;
              width: 288px;
              height: 193px;
              border-radius: 5px;
            }
          }

          .courseDescBox {
            padding-top: 10px;
            margin-left: 25px;
            flex: 1;

            .courseName {
              position: relative;
              font-family: Segoe UI;
              font-weight: bold;
              font-size: 22px;
              color: #000000;
            }

            .designUser, .groupCount, .taskCount {
              margin-top: 7px;
              font-family: Segoe UI;
              font-size: 16px;
              color: #000000;
            }
          }

          .btnBox {
            margin-top: 10px;

            .nextBtn, .submitBtn {
              cursor: pointer;
              outline: none;
              width: 80px;
              height: 30px;
              background-color: #0e79c0;
              border-radius: 5px;
              border: none;
              font-family: Segoe UI;
              font-size: 16px;
              color: #fff;
            }

            .submitBtn {
              margin-left: 10px;
            }
          }
        }

        .stepBox {
          padding: 40px 0;

          .stepNum-1 {
          }

          .stepNum-2 {
          }
        }
      }
    }

    .previewCourseDetail::-webkit-scrollbar, .confirmCourseInfo::-webkit-scrollbar {
      width: 3px;
      height: 1px;
    }

    /* 定义滚动条的滑块的样式有圆角和阴影以及自定义的背景色 */
    .previewCourseDetail::-webkit-scrollbar-thumb, .confirmCourseInfo::-webkit-scrollbar-thumb {
      -webkit-box-shadow: inset 0 0 1px #bfc4c3;
      background: #dcdcdc;
      border-radius: 10px;
    }

    /* 定义滚动条所在轨道的样式。有圆角和阴影以及淡色系的背景色 */
    .previewCourseDetail::-webkit-scrollbar-track, .confirmCourseInfo::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 1px rgba(195, 197, 198, 0.18);
      // background: rgba(195, 197, 198, 0.18);
      border-radius: 4px;
    }
  }
}

.addIconPopover {
  padding: 8px;

  .addIcon-popover {
    .up, .down {
      cursor: pointer;
      text-align: center;
      font-family: MingLiU-ExtB;
      font-size: 14px;
      color: #0a0a0a;
    }

    .addIcon-line {
      margin: 6px 0;
      width: 100%;
      height: 1px;
      background: #0a0a0a;
    }
  }
}

.saveAsPopper, .moreBtnPopper {
  padding: 3px 0;
  min-width: 105px !important;
  width: 105px !important;
  transform: translate(0, -7px);

  .buttonLists {
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 100%;

    button {
      cursor: pointer;
      outline: none;
      border: none;
      background: #fff;
      font-weight: bold;
      font-family: Segoe UI;
      font-size: 16px;
      color: #191919;
    }

    button:first-child {
      border-bottom: 1px solid #f1f3f6;
    }

    button:hover {
      background: #e4e8ee;
    }

    .disabledBtn {
      cursor: not-allowed !important;
      background-color: #dcdbdb !important;
    }
  }
}

.moreBtnPopper {
  padding: 0 !important;
  min-width: 90px !important;
  width: 90px !important;

  // height 120px
  .buttonLists {
    .el-popover__reference-wrapper {
      display: block;

      button {
        width: 100%;
        border-bottom: 1px solid #f1f3f6 !important;
      }
      
    }

    button {
      border-bottom: 1px solid #f1f3f6;
    }

    .el-upload {
      width: 100%;
      display: block;

      button {
        width: 100%;
      }
    }

    button:last-child {
      border: none;
    }
  }
}
</style>